My Maintenance : jsProgressBarHandler 0.2.1

jsprogressbarhandler.gifEver since version 0.2 of jsProgressBarHandler hit the net earlier this week some extra ideas popped up in my head. New in this version are the ability to show/hide the percentage text and the ability to define which images to use (did anyone say multi-colored bars?!)

What is jsProgressBarHandler ?

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

What has changed?

This version extends upon the changes made in version 0.2. As the need for setting the background-images (viz. the barimages) to use was there, this has moved from the (previously mandatory) CSS file into the jsProgressBarHandler core by setting the barImage option to a path to an image. Now, I’ve taken this a step further and made it possible to define an array of images, enabling you to create multi-colored bars.

Multi-colored progressbars are quite simple: if you define 3 images in your array, the first 33% will show the first image, the second 33% (ranging from 34% up to 66%) will show the second image and the last 33% (67% up to 100%) will show the third (and last image). One can define as many images as he wants, jsProgressBarHandler will adjust itself.

The other addition that made it into this release is the ability to hide the text with the percentage (which appears next to the progressbar) by manipulating the showText option. Tiny change indeed, yet upon request.

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_021.zip;Download jsProgressBarHandler 0.2.1;

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

6 Comments

  1. Great news ! Everything is working perfect !
    Many thanks for your script !

    Two small suggestions :
    – to build a package : put all your files inside a directory 😉
    – adding a space between the progress bar and the number ?
    The only remaining things I need to patch is to add float inside of int in percentage step

    Anyway, many thanks from France !
    Laurent.

  2. Hi,

    first: nice script. 🙂

    Is there a way to turn off the animation if 100% have already been reached? So if I reload my site just progress bars which won’t reach 100% (now) should be animated.

    @Laurent: to get a space between the bar and the number, just change the source code for “this.el.update( …)”. I’ve put the bar in one table-column and the number in another. With one empty column between you could choose the width of the space between bar and number. 😉

    Thorsten

  3. @Thorsten: modify line #140 of the source from

    if (this.options.animate == false) {

    to

    if ((this.options.animate == false) || (targetPercentage == 100)) {

    and you’re done 😉

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.