My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.2

jsprogressbarhandlerajax.jpgI seem to be in a scripting mood this week, as jsProgressBarHandler has been updated to version 0.2. This version is a total rewrite of version 0.1 making it even better!

What is jsProgressBarHandler all about?

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Version 0.1 was a mere rewrite to PrototypeJS of the version by WebAppers whilst version 0.2 is a full structural rewrite.

So, what has changed?

Internally jsProgressBarHandler now consists of 2 classes: a jsProgressBar-class which is a class defining a progress bar and a jsProgressBarHandler-class which scans your HTML page for span elements with the progressBar-className and automagically creates progressbars of them. The sepration into two classes enables you, the user, to manually creating new jsProgressBar instances (viz. progress bars) on the fly! The automatic creation of progress bars can even totally be disabled with the ease of setting a simple parameter named autoHook to false.

Anything else has changed?

Yes! It even now is possible to set some options when creating progress bars (note that when using autoHook all the progressbars will use the same default options). The options one can set are width, height and animate. The first two make the creation of bigger and/or smaller progress bars even more easy than before. The animate option enables/disables the use of animation (viz. should a change in percentage slide to the new percentage or directly be applied?)

Cool, is there a demo?

jsProgressBarHandler Demo

Note that next to the demo above isn’t the only one … even an AJAX demo exists!

Where can I download it?

Right here:

https://www.bram.us/wordpress;/wp-content/uploads/2007/12/jsprogressbarhandler_02.zip;Download jsProgressBarHandler 0.2;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

15 Comments

  1. hey,

    i noticed that you add the width and height settings in version 0.2. i´ve tried to use this parameters but it does not really works. what pictures i have to resize ? percentImage.png and percentImage_back1.png ?

    thank u for ur help!
    paddiii

  2. Hi !

    Thanks for version 0.2
    If you plan to make 0.3, I have a few ideas for you 😉
    1) allow the step to be changed (0.1 for example). It will require to use parseFloat instead of parseInt and percentage.toFixed(1) for display.
    2) allow to use a link to the images in the defaultOptions.
    3) change the style display to none if you want the progress bar to disappear when reaching 100% ?

    Using your progress with a cgi, I had to use autoHook = false but function initProgressBarHandler() { myJsProgressBarHandler = new JS_BRAMUS.jsProgressBarHandler(); } need to be seen.

    Is there a way to initialize only one progress bar ? I have hundred of progress bar and it took around 20% CPU.
    Thanks
    Laurent

  3. @ Paddi: both the percentImage.png (the box) and percentImage_back1.png (the back) need to be resized

    @ Laurent (1): Don’t think that stepping will make it into it, as one can calculate that itself (with a stepping of 0.1, 2 units are 20%).

    @ Laurent (2): That indeed is planned for 2.1: ability to define the images in the constructor (with fallback to the default options)

    @ Laurent (3): Check out the installation/configuration guidelines and scroll down to “Manual Creation of Progress Bars” 😉

  4. Hi again !

    I think I really need your help !
    I can’t use Event.observe(window, ‘load’, function() as my output is being sent from a cgi perl script, so the page is never fully loaded (well, progress bar is no more use when the page is fully loaded !).

    In my perl script (which send output to the web browser) , I have :
    print “0%\n”;
    print “\n”;
    print “firstManualPB = new JS_BRAMUS.jsProgressBar(\$(‘myJsProgressBarHandler’),0, {animate: true});\n”;
    print “\n”;

    then I compute few things and output this to increase the progress bar :
    print “\n”;
    print “myJsProgressBarHandler.setPercentage(‘$file’,’+1′);\n”
    print “\n”;

    From the javascript console : I have
    this.el has no properties
    myjsProgressBarHandle is not defined

    Help !!!
    Sorry to bother you with my problem (i’ve already spent many hours trying to solve this problem !).

    Laurent

    autoHook is set to false

  5. @ Laurent: you cannot call myJsProgressBarHandler.setPercentage() as the handler does not exist. What you must do instead is directly call setPercentage() on firstManualPB: firstManualPB.setPercentage('$file','+1');

  6. Hello !

    I’ve found what’s wrong !
    In your documentation, you wrote :

    firstManualPB = new JS_BRAMUS.jsProgressBar();

    in fact, it should be :

    firstManualPB = new JS_BRAMUS.jsProgressBarHandle();

    Then it works fine !
    Thanks for your help !

    Laurent

  7. @Laurent: no, the documentation is correct … but the release contained a wrong file (*oops*), please redownload the file 😉

    The reason you need to use new JS_BRAMUS.jsProgressBarHandler(); is because (apparently) you’re still using the Handler. The Handler merely is an object which holds several jsProgressBar() instances.

    If you look at the example (see link in the post above) you’ll see that the action to set the percentage for the last progressBar is set on the element; not the handler 😉

    Anywho, it works for you, so no need to change your code 🙂

  8. I’m sorry but now I have :
    el has no properties
    from this line :
    this.id = el.id;

    My cgi output is :
    <span class=”progressBar percentImage1″ id=”access20071201″>0%</span>
    <script language=”javascript”>
    access20071201 = new JS_BRAMUS.jsProgressBar();
    </script>
    <script language=”javascript”>
    access20071201.setPercentage(‘access20071201′,’+1’);
    </script>

    Thanks fot your help !

  9. @Laurent: should be: access20071201 = new JS_BRAMUS.jsProgressBar($('access20071201'), 0); and access20071201.setPercentage('+1'); 😉

    BTW: Version 0.2.1 is up for grabs 😉

  10. Pingback: JavaScript ??/????
  11. Hello.

    I’ve managed to set-up the script and get it working with new images but can’t find the part of the js that alters th elenght of time the animation takes?? where can i alter this value to slow it down so it takes aorund 5 seconds??

    Thanks

    John

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.