SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Add a delay in a javascript?
-
Mar 24, 2004, 23:34 #1
- Join Date
- Oct 2002
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Add a delay in a javascript?
I'm using this fly-in-floating-div-bix script on my website:
http://www.cerebuswebmaster.com/onsi...flying_in.html
I need it to wait one second before it flys in, right now it just flys in on page load. Anyone know how i can make it delayed 1 second?
thanks!
-
Mar 25, 2004, 02:20 #2
- Join Date
- Apr 2001
- Location
- Canada
- Posts
- 5,458
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
In PHP it's sleep() but I think it's the same in JS too. Of course, I could be way wrong
Mike
It's not who I am underneath, but what I do that defines me.
-
Mar 25, 2004, 02:21 #3
- Join Date
- Oct 2002
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
here's the code:
(in the head)
Code:<script language="JavaScript"><!-- //script by Clarence Eldefors http://www.cerebuswebmaster.com var speed = 20; var step = 5; var hide = 10000; var moveto = 500; // Do not edit below this line var left = 0; function movein(){ if (document.layers) { document.layers['message'].pageX = window.pageXOffset + left; left+=step; if(left<moveto){ setTimeout('movein()',speed); } else { setTimeout('closemessage()',hide); } } else{ document.getElementById('message').style.left=left+'px'; left+=step; if(left<moveto){ setTimeout('movein()',speed); } else { setTimeout('closemessage()',hide); } } } function closemessage(){ if (document.layers) {document.layers['message'].visibility='hidden';} else{document.getElementById('message').style.visibility='hidden';} } //--></script> <style type="text/css" media="screen"><!-- #message {top:200px; border:1px solid black; width:200px;background-color:yellow;padding:4px; position:absolute;} --> </style>
and <BODY onLoad="movein()">
-
Mar 25, 2004, 03:26 #4
- Join Date
- Oct 2002
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
how would i use the sleep command?
-
Mar 25, 2004, 14:59 #5
- Join Date
- Oct 2002
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
help
-
Mar 25, 2004, 15:46 #6
Add this function to your script:
Code:function waitMovein() { setTimeout('movein()', 1000); }
HTML Code:<body onload="waitMovein();">
-
Mar 25, 2004, 15:48 #7
- Join Date
- Jul 2000
- Posts
- 201
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try this ... I've added comments where I made changes ...
HTML Code:<html> <head> <script language="JavaScript"><!-- //script by Clarence Eldefors [url]http://www.cerebuswebmaster.com[/url] var speed = 20; var step = 5; var hide = 10000; var moveto = 500; // Do not edit below this line var left = 0; function movein(){ document.getElementById('message').style.visibility='visible'; // Make it visible if (document.layers) { document.layers['message'].pageX = window.pageXOffset + left; left+=step; if(left<moveto){ setTimeout('movein()',speed); } else { setTimeout('closemessage()',hide); } } else{ document.getElementById('message').style.left=left+'px'; left+=step; if(left<moveto){ setTimeout('movein()',speed); } else { setTimeout('closemessage()',hide); } } } function closemessage(){ if (document.layers) {document.layers['message'].visibility='hidden';} else{document.getElementById('message').style.visibility='hidden';} } //--></script> <style type="text/css" media="screen"><!-- #message {top:200px; border:1px solid black; width:200px;background-color:yellow;padding:4px; position:absolute; visibility:hidden;} // Start with the message hidden --> </style> </head> <body onLoad="setTimeout('movein()',2000)"> <!-- Here's the delay in milliseconds --> <div id="message"> hello </div> </body> </html>
-
Mar 25, 2004, 15:52 #8
- Join Date
- Jul 2000
- Posts
- 201
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
doh! Vinnie beat me by 2 minutes
... Note I did add a visibility:hidden which keeps the div from appearing until after the delay
Bookmarks