« Google Search Coupon | Home | How people really use the iPhone »
jsProgressBarHandler 0.3.3
A new version of jsProgressBarHandler is available. Changes are two bugfixes, an update of the Prototype loading mechanism and the addition of image preloading and the support for a callback function (named onTick
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 was a full structural rewrite. Version 0.3 builds upon 0.2 by making it all more robust.
So, what has changed?
This release adds a few new features such as the support to preloading the used images (see extra note below) and the addition of a a callback function. This callback function (named onTick and passed in via the options Object) is called whenever the value of the progressBar has changed, allowing you - the user - to hook your own functionality to progressBars whenever a certain value is passed/reached.
An example of an onTick function would be this one:
-
demoPB = new JS_BRAMUS.jsProgressBar(
-
$('theElementToReplace'), // the element to create the progressbar in
-
0, // initial percentage
-
{ // options
-
onTick : function(pbObj) { // options.onTick
-
-
switch(pbObj.getPercentage()) {
-
-
case 50:
-
alert('Halfway');
-
break;
-
-
case 95:
-
alert('Nearly full!');
-
break;
-
-
case 99:
-
return false;
-
break;
-
-
}
-
-
// important to return true or counting will stop!
-
return true;
-
}
-
}
-
);
When the progressBar is now set to 100% (and with animation on) a warning will be shown at 50% and at 95%. Above that the 100 mark will not be reached, as false is returned at 99% (yes, it's possible for you to break the counting/ticking from within the onTick callback). When animation is off and setPercentage is called to 100, it will immediately skip to 100%.
Regarding the preloading feature, it should be noted that after having spent several hours in all IEs (6 up to 8b2) and all other browsers I've decided to ditch the preloading aspect in IE, as it's really quirky. Yes that's correct: preloading only works in all browsers but IE (viz. it works in Firefox, Safari, Opera, ...)
Next to that two bugs that were found (thank you commenters Kevin and Jack) were fixed, improving compatibility with IE and preventing a possible infinite loop.
Anything else has changed?
Internally, the code that is used to attach the progressBars to the page was moved from the window its load event to the Prototype's implementation of the dom:loaded event of the document. As a result the progressBars get inited faster.
Above that some extra styling options were added: the outputted percentage image now has a class percentImage and the outputted percentage text now has class percentText, allowing you to style them easily.
Whatever happened to 0.3.2?
Work on the preloading feature once started in April 2008, but was never finished (as IE decided to throw in some errors and time was short). Now - 7 months later - I found time again to work on the project and finish what I started back then. With this I decided to skip a version as the previous work already was archived as 0.3.2
Cool, is there a demo?
TIP: At the multicolor bar at the bottom, click that 
-icon a few times to see the internal queue in effect 
Please note that next to the demo above even an AJAX demo exists!
Where can I download it?
Right here:
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.
Spread the word!
About this entry
Best of Bram.us
Start getting used to scratching and smudging the iPhone with this Flash based iPhone Simulator
Automatically wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
Pimp Your Firefox to be a web all-star
A look at the inc.common.php, spreading handy functions.
Photoshop Script inspired in the Chlomoscript to unobtrusively pimp photos you have taken.
Methods to adding file management options to TinyMCE (Part 1), Extending TinyFCK (Part 2) and PHP file uploads overview (Spinoff 1).
Trackbacks/Pings
[...] This version is outdated!Grab the latest version over at the jsProgressBarHandler Project [...]
Comments
I have a question.
Mostly is a progressbar used to show how far the data is uploaded. I have been playing with it but how can the progressbar be “refreshed” I mean There is a certain amount of data been read but the progressbar is not updated. On the end of reading data you can see it moving to the 100%. I understand this issue has nothing to do with the progressbar itself but to how refresh the progress bar?
Or can I call a function from which I don’t know if exist. Further, it looks, it is: smart!
With regards,
Nico
Congratulations … code is nice !
I have a question, I need used number decimal “10.5″
who I do ?
I included the ‘jsProgressBarHandler.js’ file in my jsp using and for some reason the bar is showing up only when I hard code the src=’contextpath’/images/… to get the image location for the boxImage and barImage properties of defaultOptions. In order to get the contextPath dynamically, I often use
document.forms[0].contextPath.value
where contextPath is a hidden field in my jsp
if the javascript in itself is in my jsp instead of include a .js file
I had to create a global variable in my jsp javascript as
var contextPath = ”
and access that variable in the jsProgressBarHandler.js to make it work as follows:
var defaultOptions =
{
…
boxImage : contextPath + ‘/pages/javascript/jsprogressbar/images/bramus/percentImage.png’,
barImage : contextPath + ‘/pages/javascript/jsprogressbar/images/bramus/percentImage_back.png’,
…
}
Nice job on the script BTW.
I noticed in your Ajax demo that you are simply counting the number of times Ajax update is called and then updating the bar accordingly. Is there any way that you could provide and example of how to update the progress bar using to the information pulled by the Ajax update?
For example:
First Ajax update: php script returns 34 (progress bar updates to 34%)
Next ajax update: php script ruturns 37 (progress bar updates to 37%)
A quick explanation of how to do that would be extremely helpful.