SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    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!

  2. #2
    ********* Genius Mike's Avatar
    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.

  3. #3
    SitePoint Enthusiast
    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()">

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how would i use the sleep command?

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    help

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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).

  7. #7
    SitePoint Addict
    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>

  8. #8
    SitePoint Addict
    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

Posting Permissions

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