Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    Javascript Time Delay

    Hey all, I have a couple of videos that display on web page. I want one to display 5 seconds after another when someone clicks a link. Now I know of the setTimeout method, but I can't seem to get it to work in this below code. The thing is both of the video elements are in the same function. Any help will be greatly appreciated:

    Code:
    <script type="text/javascript">
    <!--
    window.onload = initLinks;
    
    var myVid = new Array("area2d.swf","Bar2D.swf", "Column3D.swf", "Column2D.swf");
    var myFlash = new Array("data/Area2D.xml","data/Bar2D.xml", "data/Column3D.xml", "data/Column2D.xml");
    var thisVid = 0;
    
    function initLinks() {
    	document.getElementById("vid1").onclick = processVid1;
    	document.getElementById("vid2").onclick = processVid2;
    	document.getElementById("vid3").onclick = processVid3;
    	document.getElementById("prevLink").onclick = processPrevious;
    	document.getElementById("nextLink").onclick = processNext;
    }
    
    function processVid1() {
    	document.getElementById("myVideo").src = myVid[0];
    	document.getElementById("myVideo").dataURL = myFlash[0];
    	document.getElementById("myVideo2").src = myVid[1];
    	document.getElementById("myVideo2").dataURL = myFlash[1];
    	return false
    }
    
    function processVid2() {
    	document.getElementById("myVideo").src = myVid[2];
    	document.getElementById("myVideo").dataURL = myFlash[2];
    	document.getElementById("myVideo2").src = myVid[3];
    	document.getElementById("myVideo2").dataURL = myFlash[3];
    	return false
    }
    
    function processVid3() {
    	document.getElementById("myVideo").src = myVid[2];
    	return false
    }
    
    function processPrevious() {
    	if (thisVid == 0) {
    		thisVid = myVid.length;
    	}
    	thisVid--;
    	document.getElementById("myVideo").src = myVid[thisVid];
    	return false;
    }
    
    function processNext() {
    	thisVid++;
    	if (thisVid == myVid.length) {
    		thisVid = 0;
    	}
    	document.getElementById("myVideo").src = myVid[thisVid];
    	return false;
    }
    
    
    -->
    </script>
    
    
    </head>
    
    <body>
    
    	<div id="slideshow">
    		<h1>Introducing</h1>
    <table width="">
    <tr>
    <td>
    <embed src="area2d.swf" flashVars="&dataURL=data/Area2D.xml&debugMode=0&chartWidth=295&chartHeight=295" quality="high" width="295" height="295" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" id="myVideo" />
          </embed>
    <td
    <td>
    <embed src="Bar2D.swf" flashVars="&dataURL=data/Bar2D.xml&debugMode=0&chartWidth=295&chartHeight=295" quality="high" width="295" height="295" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" id="myVideo2" />
          </embed>
    <td
    </tr>
    </table>
    	</div>
    
    
     
    	<div id="pageTree">
    
    	<ul>
    	<li><a href="video1.html" id="vid1">Area</a></li>
    	<li><a href="video2.html" id="vid2">Bar</a></li>
    	<li><a href="video3.html" id="vid3">Inventory</a></li>
    	</ul>
    	</div>
    
    	<div align="center">
    	<h2><a href="previous.html" id="prevLink">&laquo; Previous</a>&nbsp;&nbsp;<a href="next.html" id="nextLink">Next &raquo;</a></h2>
    	</div>
    
    </body>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    i don't see any use of setTimeout in your code...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    But I want the element with an id of myVideo2 to appear 5 seconds after the element with an id of myVideo appears.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    ok, no problem. just delay the lines that dispatch.

    for example:

    Code:
    	document.getElementById("myVideo").src = myVid[thisVid];
    becomes:

    Code:
    	
    window.setTimeout(function(){
       document.getElementById("myVideo").src = myVid[thisVid];
    }, 5 * 1000);
    you should be able to simply wrap the green text around whatever you want to delay.
    you can change 5 to a different # of seconds if you need.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    johnmerlino (11-04-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •