Add a delay in a javascript?

**Myke** · Mar 24, 2004, 23:34

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!

**Mike** · Mar 25, 2004, 02:20

In PHP it's sleep() but I think it's the same in JS too. Of course, I could be way wrong

**Myke** · Mar 25, 2004, 02:21

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()">

**Myke** · Mar 25, 2004, 03:26

how would i use the sleep command?

**Myke** · Mar 25, 2004, 14:59

help

**vgarcia** · Mar 25, 2004, 15:46

Add this function to your script:

Code:

function waitMovein()
{
  setTimeout('movein()', 1000);
}

Then change your body tag to this:

HTML Code:

<body onload="waitMovein();">

setTimeout() is the function you're looking for. The first parameter is the function/procedure you want done, while the second parameter is the time to wait for execution (in milliseconds).

**FauxPas** · Mar 25, 2004, 15:48

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>

**FauxPas** · Mar 25, 2004, 15:52

doh! Vinnie beat me by 2 minutes

... Note I did add a visibility:hidden which keeps the div from appearing until after the delay

The SitePoint Forums have moved.

User Tag List

Thread: Add a delay in a javascript?

Thread Tools

Display

Add a delay in a javascript?

Bookmarks

Bookmarks

Posting Permissions