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


21 Responses to “JQuery Progress Bar 2.0”

  1. kam Says:

    Hi gaweee,
    Under what license are you publishing the code.
    thx

  2. jared Says:

    hi,

    sorry to resurect a dead post. i’m wondering how to disable the progress bar slide altogether. if you have any tips i’d be open to listen!

    thanks

  3. Krish Says:

    Can anyone tell me how to use this with JSP.
    And if I have struts 2 at the back end

  4. Casey Temple Says:

    HELP! I’m would like to use this progress bar, but your demo for uploading doesn’t work in IE8. Any tips?

  5. Stephane Says:

    And another issue, this time related to the width of the progress bar.
    If setting a width of 200 then the progress bar displays a 140px wide red bar centered inside the 200px wide grey bordered bar.
    I don’t know if the width must also be set using some css…

  6. Jason Says:

    if the situation is like this :
    maximum value = 100
    entered value = 110

    is this possible to show 100% full + you have over budget of 10%?

    thanks for the great script

  7. boris Says:

    Hi,

    Excellent plugin, saved me a chunk of work!!

    I Found a very small bug (version 2.0) and I can’t see that anyone else has mentioned it (but I’m probably using it differently to most).

    When you display the values in fraction format the default functionality of changing the colour of the progress bar does not work if the fractions are low values the bar just stays red. I’ve fixed this by changing line 112 of jquery.progressbar.js to calculate the percentage rather than just comparing the running_value to the key values, which determine the bar image.

    [Original Line 112] if (config.running_value >= parseInt(i)) {
    [Patched Line 112] if (getPercentage(config) >= parseInt(i)) {

    Once again, thanks for a great plugin and hopefully this helps someone else out.

  8. frank Says:

    I’m trying to add a stop/reset system but I can’t figure it out. Can someone help me? Struggle for days now.
    Thank you :)

  9. Michael Says:

    Hi,

    Could you tell me how to modify this to use any background image I choose. It seems to only work with transparent Gifs?

    Thanks

    Michael

  10. kh Says:

    Hi
    Im using the progressbar to show time registration progress. Sometimes people work more than 100%
    When the progressbar is set to > 100% the img background position is incorrect..its position moves out of the progress bar and it starts to get white on the left. Would be better if when percentage > 100 it would have the same position as 100%.

    $bar.css(“background-position”, (((config.width * -1)) + (getPercentage(config) * pixels)) + ‘px 50%’);
    vs
    $bar.css(“background-position”, (((config.width * -1)) + (100 * pixels)) + ‘px 50%’);

    Regards

  11. straz Says:

    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.

  12. straz Says:

    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!

  13. straz Says:

    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

  14. Jamez Says:

    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?

  15. Auspex Says:

    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 :)

  16. gaweee Says:

    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

  17. Auspex Says:

    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?

  18. fadi Says:

    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?

  19. fadi Says:

    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

  20. gaweee Says:

    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).

  21. fadi Says:

    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


Recent Comments