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
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Waitbar in javascript for HTML

    Hello,

    I wrote a little form with a submit button. When the user clicks on submit, a javascript function is executed. That function makes some expensive queries and needs 5-10 seconds before it finishes. Therefore I would like to show an animated gif mimiking a waitbar while the function is calculating. My problem is that when I do that, he first executes the function (5-10 secs), then shows the waitbar, then shows the results... Is there a way to force the display of the waitbar before he begins (and during) the execution?

    Thank you for your help!

    François

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    If you use a wait while loading (or whatever) script like this:-

    Code:
    <style>
    .styling{
    background-color:black;
    color:red;
    font: bold 24px MS Sans Serif;
    padding: 6px;
    }
    </style>
    
    <br><br>
    <center>
    <span id = "a" class = "styling"></span>
    </center>
    
    <script type = "text/javascript">
    var num = 0;
    var tim;
    var txt = "Loading, please wait ........";
    document.getElementById("a").innerHTML = txt;
    function showLoad() {
    num ++;
    if (num == 5) {  // erase after 5 seconds, adjust to suit
    document.getElementById("a").style.display="none";
    window.clearTimeout(tim);
    }
    else {
    tim = window.setTimeout("showLoad()", 1000);
    }
    }
    
    </script>
    then

    onsubmit = "showload(); yourOtherFunction();"


  •  

    Posting Permissions

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