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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Javascript delay issue

    Hi all - I am struggling to get some code working. What I want is the following :

    1. There is a hidden div (basically just a block) on a page.
    2. When the user presses an on screen <button> the div appears, turns blue, there is a 3 second delay and the div then dissapears again.

    What I am guessing is happening with my code is that it is all working but there is no ouput to the document until the very end of the script by which time the div has been turned to display:none again?

    Can anyone suggest the best way of doing this please?

    Here is the example code :

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function pause(ms) {
    	ms += new Date().getTime();
    	while (new Date() < ms){}
    } 
    function show() {
    	var b1=document.getElementById("bar1");
    	b1.style.backgroundColor="blue";
    	b1.style.display="block";
    	pause(3000);
    	b1.style.display="none";
    }
    </script>
    </head>
    <body>
    <button name="test" onclick="show();">Press Me</button><br>
    <div id="bar1" style="display:none;  width:50px; height:40px;border:0px;"></div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,517
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function show(id) {
    	var b1=document.getElementById(id);
    	b1.style.backgroundColor="blue";
    	b1.style.display="block";
        clearTimeout(show[id]);
        show[id]=setTimeout(function(){ b1.style.display="none" },3000);
    }
    </script>
    </head>
    <body>
    <button name="test" onclick="show('bar1');">Press Me</button><br>
    <div id="bar1" style="display:none;  width:50px; height:40px;border:0px;"></div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That's great Vic - works a treat - Now I just need to work out what it's doing

    (i'm pretty new to Javascript) - What is the significance of passing the parameter (id) to the function and what do the square brackets signify please?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,517
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function show(id,c) {
    	var b1=document.getElementById(id);
    	b1.style.backgroundColor=c;
    	b1.style.display="block";
        clearTimeout(show[id]);
        show[id]=setTimeout(function(){ b1.style.display="none" },3000);
    }
    </script>
    </head>
    <body>
    
    passing the id allows multiple applications of the script.<br />
    <br />
    when using setTimeout it is good practice to clear the timeout before use.<br />
    this can be done by assigning the timeout to a global variable<br />
    but global variables should be avoided<br />
    so a property of function show(show['bar1'] = show.bar1) is used.<br />
    <br />
    <button name="test" onclick="show('bar1','blue');">Press Me</button><br>
    <div id="bar1" style="display:none;  width:50px; height:40px;border:0px;"></div>
    
    <button name="test" onclick="show('bar2','red');">Press Me</button><br>
    <div id="bar2" style="display:none;  width:150px; height:40px;border:0px;"></div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    spman (11-03-2012)

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you for the concise explanation Vic - Very very helpful


  •  

    Posting Permissions

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