I 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?
Note that next to the demo above isn’t the only one … even an AJAX demo exists!
Where can I download it?
Right here:
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?
Don’t worry my friend, there’s a full page here on bram.us devoted to jsProgressBarHandler where you can find all info about it.
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
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
@ 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” 😉
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
@ Laurent: you cannot call
myJsProgressBarHandler.setPercentage()as the handler does not exist. What you must do instead is directly callsetPercentage()onfirstManualPB:firstManualPB.setPercentage('$file','+1');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
@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 severaljsProgressBar()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 🙂
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 !
@Laurent: should be:
access20071201 = new JS_BRAMUS.jsProgressBar($('access20071201'), 0);andaccess20071201.setPercentage('+1');😉BTW: Version 0.2.1 is up for grabs 😉
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