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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Am I using setTimeout() properly?

    I'm trying to create a progress bar that increments every time a specific function, in this case "interval()" is called. When the code below executes, my progress bar goes straight from 0% to 100%. But, if I uncomment the 'alert()' line, it works perfectly (except for the alert box).

    Here's a link to a page with this code: [click here]

    Any insights into my dilemma will be much appreciated.

    // JS Code follows * * * *

    function interval () {

    var progWidth = Math.round ( 100 / document.numIntervals * ( ++document.curInterval ) );

    document.all [ "percent" ].innerText = progWidth + "%";
    document.all [ "progress" ].width = Math.round ( progWidth * .85 ) + "%";
    //alert ( progWidth );
    }

    function doStuff () {

    // Number of times interval() is called is calculated
    document.numIntervals = 25;
    document.curInterval = 0;

    setTimeout ( "interval()", 1000 );
    setTimeout ( "interval()", 1000 );

    for ( var i = 0; i < document.numIntervals - 2; i++ ) {
    setTimeout ( "interval()", 1000 );
    }

    return ( true );
    }

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please try the following



    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script>
    bar_max_width=600
    percent=4
    step_size=Math.round((bar_max_width/100)*percent)
    count=0
    function ex(){
    my_bar.style.width =parseInt(my_bar.style.width)+step_size
    bar_chk=parseInt(my_bar.style.width)
    if(bar_chk>bar_max_width){
    setTimeout("bar_chk=2;my_bar.style.width=2",5000)
    }
    count+=percent*1
    document.getElementById("my_bar").innerHTML=count
    }
    </script>

    </HEAD>
    <BODY>

    <button onclick="ex()">Click</button>
    <div style="position:absolute;left:10px;top:100px;width:600px;background-color:#FFFF00;text-align:center;border:1 solid black">PROGRESS BAR</div>
    <div id="my_bar" style="position:absolute;left:10px;top:101px;width:2px;background-color:#DDDD00;border-left:1 solid black"></div>


    </BODY>
    </HTML>




  •  

    Posting Permissions

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