Jun 21, 2009

JQuery Progress Bar 2.0

Author: gaweee | Filed under: development, howto
jQuery progressBar screenshot

Hi all its us again, In the past few months we’ve been asked many a times to help improve the progressbar code. We’ve also been referenced by several websites as THE progressbar to use. In all, we felt we owed it to you guys to make it better.

So here we are, after all those emails and bug reports, we finally got down to it. Always good to take a couple of months to have a fresh prespective of things. We ripped out the old code and made it much better and more extensible than its predecessors. So much that we decided it was enough to qualify as a major revision.

 

Let see whats been done…

  • Cleaned up the code, yes its lighter, cleaner faster. (Still lacks documentation though) :|
  • Callbacks! Everyone’s favourite
  • Max values, you can now set it to be 150/2000 instead of just a percentage
  • Text formats. Show 75/100 or 75% by toggling the textFormat accordingly
  • Steps, how many steps to get to your target value
  • Step Duration, how long each step lasts
  • Webkit (Chrome/Safari) compatibility. More like, Webkit Hacks

Once again, many a thanks for all those who have so generously provided the feature requests as well as bug fixes every now and then. And thanks for all your patience in waiting for this new release. :D
If its working for you, drop us a comment and tell us where we can see your stuff!

Download the new jQuery progressbar here: jQuery progressbar
or view the demo here


« Howto: Repackageable custom extension development in Magento – Part 9 – Frontend – List
HOWTO: Find icons for your new prototype system »

This entry was posted on Sunday, June 21st, 2009 at 10:39 pm and is filed under development, howto. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

read users' comments (11)

11 Responses to “JQuery Progress Bar 2.0”

  1. straz Says:
    October 16th, 2009 at 11:38 am

    Is JQuery Progress Bar 2.0 available under an MIT or equivalent license? I see a copyright notice, but no mention of a license. thanks.

  2. straz Says:
    October 12th, 2009 at 10:16 pm

    Aha, never mind, I found my bug. The value I was passing was undefined, i.e. I was calling .progressBar(undefined) instead of .progressBar(30).

    I suppose it might be a feature request to ask for progressBar to check for invalid arguments and raise an error instead of proceeding silently. But anyway now it seems to work great, thanks!

  3. straz Says:
    October 12th, 2009 at 4:40 pm

    First of all, thanks for writing the JQuery Progressbar library! It looks really cool.

    I’d like to use it, but I seem to keep running into a problem. You can see what I mean by viewing my test app at http://strassmann.com/pbar/. It’s the stub for a file upload tool.

    If you start by clicking “start transfer” two or three times, a progress bar gets created just fine for each transfer. By “fine”, I mean I have passed a value for BarImage (the green progress bar) and the initial progress value is zero.

    If you then click on “update all”, the bars seems to be reset completely. They don’t get updated (to 30%, as they should), and the bar image is
    inexplicably reset to the red bar.

    Would you mind if I asked you why this might not be working? Why would calling updateTask(), which simply calls {div}.progressBar(30)
    mess up the bar?

    many thanks,
    Steve

  4. Jamez Says:
    August 14th, 2009 at 10:01 pm

    I love this uploadprogress script but how do you stop it from sending packets after the stop button on my browser is pressed? It seems then when I press stop during an upload the uploadprogress bar will stop updating which is good but if I have a look at my internet connection I still see it sending packets. Whats the fix for that please?

  5. Auspex Says:
    July 6th, 2009 at 11:20 am

    Sorry for double-posting but i’ve found the problem….
    In your function getText(config) you should swith the config.running_value to the config.value.

    This fixes the problem with the title bug :)

  6. gaweee Says:
    July 6th, 2009 at 11:18 am

    ooo thanks!
    yeah found the bug, will be updating the code shortly.
    we were missing a $bar.attr('title', getText(config));
    for the progress bar updates

  7. Auspex Says:
    July 6th, 2009 at 10:56 am

    Hey, great plugin!

    I have seem to found a bug though… The attribute “title” is not updated correctly, it always shows “0%” when we mouse over the bar.
    I’ve been looking into the code and i haven’t figured it out yet.
    Any ideas?

  8. fadi Says:
    June 24th, 2009 at 8:11 am

    sorry for posting too much, i just want to submit the form after finishing the upload,
    replaced “location.reload(true);” with “document.getElementById(”uploadform”).submit();” but nothing happens
    any ideas?

  9. fadi Says:
    June 24th, 2009 at 5:11 am

    THANK YOU VERY MUCH, everything is working beyond fine. i have done the backend php magic but for some reason i can’t detect the POST values of the iframe. since i need it to tell the user the image is uploaded without having the need to user the callback function

  10. gaweee Says:
    June 23rd, 2009 at 9:10 pm

    Hey fadi,
    good question!
    The problem is about the granularity between the ajax calls and the actual post. 1 ajax call is made to check the status at 98%, the next ajax call is when the post has already finished, so we get a null response. There is no certain way to say if the file has been uploaded without some backend php magic.
    I’ve fixed the example such that it reloads the page when the data returned is null. That should work. If need be, you can check for successive nulls (for graceful degeneration).

  11. fadi Says:
    June 23rd, 2009 at 1:54 pm

    thx for the update, finally its compatible with opera and chrome and safari. one question how can i refresh the page after uploading the image?? when i upload an image the bar stops at 98% but the image is upload, i want to refresh when the upload ends
    thx again

Leave a Reply