SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery preloader progress bar: How to make it automated and show first

    Below I have a jquery progress bar (see code). Now currently it loads using a start/stop button function. I want it to load automatically first thing before all the other elements of my website loads, since it is a progress bar after all. I want it to start the moment the web page starts to load and I want it to stop the moment the content of the webpage starts showing. (Just to show progress during that white screen waiting period...)

    My code:

    JS:
    <script type="text/javascript">
    var pct=0;
    var handle=0;
    function update(){
    $("#progressbar").reportprogress(++pct);
    if(pct==100){
    clearInterval(handle);
    $("#run").val("start");
    pct=0;
    }
    }
    jQuery(function($){
    $("#run").click(function(){
    if(this.value=="start"){
    handle=setInterval("update()",100);
    this.value="stop";
    }else{
    clearInterval(handle);
    this.value="start";
    }
    });
    $("#reset").click(function(){
    pct=0;
    $("#progressbar").reportprogress(0);
    });
    });
    </script>

    HTML:

    <div id="progressbar"></div>
    <input type="button" id="run" value="start"></input>
    <input type="button" id="reset" value="reset"></input>

    CSS:

    #progressbar{
    border:1px solid black;
    width:200px;
    height:20px;
    position:relative;
    color:black;
    }
    /* color bar */
    #progressbar div.progress{
    position:absolute;
    width:0;
    height:100%;
    overflow:hidden;
    background-color:#369;
    }
    /* text on bar */
    #progressbar div.progress .text{
    position:absolute;
    text-align:center;
    color:white;
    }
    /* text off bar */
    #progressbar div.text{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
    }
    Would Appreciate any help. Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    This part will allow it run run as soon as the page starts loading:

    Code javascript:
    jQuery(function ($) {
        ...
    });

    So let's see - the progress bar seems to be started with this command:

    Code javascript:
    handle = setInterval(update, 100);

    and stopped with this one:

    Code javascript:
    clearInterval(handle);

    So to automatically start it when the page starts loading, and to stop it when it finishes loading, it should be as simple as doing something like this:

    Code javascript:
    jQuery(function ($) {
        handle = setInterval(update, 100);
        $(document).on('load', function () {
            clearInterval(handle);
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your answer. Appreciated. However, I replaced this part of my code:
    jQuery(function($){
    $("#run").click(function(){
    if(this.value=="start"){
    handle=setInterval("update()",100);
    this.value="stop";
    }else{
    clearInterval(handle);
    this.value="start";
    }
    });
    $("#reset").click(function(){
    pct=0;
    $("#progressbar").reportprogress(0);
    });
    });

    with your suggested code, but the bar does not load at all. I only see the empty div. Any suggestions on the rest of the JS code which still reference to the button id's and values(start, run, reset etc.)?


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
  •