jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar)

Trackbacks/Pings

1. B10[m|g] Feb 02 2008 / 3pm

   I’ve used jsProgressBarHandler with Perl’s CGI to provide my users with a progress of the uploads. For how to do that, see CGI’s UPLOAD_HOOK.

   To display the bar, I simply use an existing script, for a) it looks better than anything I’d ever create and b) it works

   Bram.us ’s jsProgressBarHandler is the one I chose for this example….
2. JavaScript Progress Bar - Team Tutorials Aug 12 2008 / 6am

   [...] the bram.us website to download the files that will make the progress bar [...]
3. JavaScript Progress Bar 2 - Team Tutorials Aug 13 2008 / 10am

   [...] to bram.us to download the files that will make the loading bar [...]

Comments

1. Doug Hungarter Aug 02 2007 / 2pm

   This is quite a nice piece as I was noticing the lack of functionality in the original post (testing in Safari). I don’t think it will be construed as a “bash” and strongly encourage and look forward to evolutions of experiments/projects like this.
2. Nix Aug 19 2007 / 12am

   I really like your product Keep it going!!!
3. Chris Aug 21 2007 / 8am

   Hi,

   I really like this script, works wonderfull in all modern browsers. Keep up the good work!

   I got a small question: Is it possible to use this script together with prototypes Ajax.updater function? For example I have a page which does 5 Ajax-Updates through the Ajax.updater of prototype.

   With Ajax.Responders.register and Ajax.Responders.unregister I can count the requests that are running and finished. So I thought, when I put a myJsProgressBarHandler.setPercentage(‘progress’,'+20′); in Ajax.Responders.unregister it should count up until 100%, but it doesnt. If I use the function on generic links (like in your example page) it works fine without problems.

   Im quite new to ajax (and Javascript as whole), so it would be nice if you could give me a tip how to do this.

   Thx in advance
4. Bramus! Aug 21 2007 / 11am

   @ Chris : I’ve knocked up an AJAX Powered jsProgressBarHandler Demo for you. Reason I’m using my own activeRequestCount is that the Ajax.activeRequestCount tends to give the wrong number back. The Ajax.Responders.register-codeblock is based upon .

   Hope it helps!
5. Chris Aug 21 2007 / 8pm

   Hi Bramus,

   thank you for that, really nice example to study for a beginner like me .
6. Mark Aug 27 2007 / 5am

   Is there a way to insert this into WordPress? It seems like the code words simple enough but I am not quite sure where I would insert this.

   I would imagine I can upload it as a plugin but that does not sound right?
7. Daniele Simonin Aug 27 2007 / 8am

   Good project! very very useful!
8. Bramus! Aug 27 2007 / 8am

   @ Mark: A plugin indeed would be needed … what do you want exactly? I’m thinking of a simple method to showing progress bars, without the manipulative controls
9. Jan Aug 30 2007 / 9pm

   This code is very nice. I’m using it in a project and I noticed 1 small bug. I work in a SEO-Optimized environment, meaning I have URLs like http://example.com/something/somethingelse/somethingnew. In your javascript you have the function buildProgressBar() which makes an image with as source “images/percentImage.png”. Since I have all my images in my docroot (like most programmers nowadays), I changed it to /images/percentImage.png. Maybe this is can be valuable as a fix?

   regards,
   Jan
10. Ala7lam Aug 31 2007 / 11pm

    wow,

    Thats a very nice work there Bramus!

    Good job!
11. Bramus! Sep 06 2007 / 9pm

    @ Jan : thanks for mentionning, will implement (amongst with some other stuff I have planned)
12. Dario Sep 10 2007 / 8am

    Hello. Your progress bar is super. But i have one problem. I want to use “Weight Lost Progress ” that orange bar. But when I reload site and progress bar reload too to standard 50%. I want for example when I set it to 4% or other percent to stay like this all the time until I change it.
13. Dario Sep 10 2007 / 8am

    Can you please help me
    And one more question how to change perception by NOT using button near progress bar
14. Bramus! Sep 10 2007 / 3pm

    @ Dario: set the innnerHTML of the span you wish to change to 4% (see step #2 of the installation/configuration – change that 15% to 4%)

    @ Dario: dynamically updating can only be done through javascript, as the script itself IS javascript … can be hooked to any event of course (onClick, onBlur, onFocus, etc.)
15. Mitt Sep 13 2007 / 2am

    Any chance a version for mootools will be made? I have constructed my site using that and don’t really want to change to prototype.
16. javier Oct 03 2007 / 9pm

    do you have a sample to post a form?
17. Bramus! Oct 05 2007 / 2pm

    @ javier: jsProgressBarHandler is meant for presenting percentages, not for inputting them. If you want a script to insert percentages through a slider element, I suggest you take a look at the Unobtrusive Slider Control by Frequency Decoder, but maybe I’ll crank up some code in the future … kinda busy right now though

    Anywho, worth mentioning is that it’s possible to hook an input element to a progressbar … set the onChange (or onBlur) event of that input element to update the progressbar
18. Bramus! Oct 05 2007 / 2pm

    @ Mitt: not right now no … very busy atm :S
19. zsoga Oct 08 2007 / 9pm

    hi bramus, i’m an absolutely beginner in this stuff, so your example don’t really helps for me: i try the steps »installation/…« and »static code…«, but my flash application don’t accept to place the code »import flash.external.*« in this way. my question is: should i replace the »star« with anything else? i’ve no idea for this, have also the same situation with »…onRelease = function() {« – what have i to set instaed of »function« ???
    dont call my stupid, i’m an old man, but a phoetus on coding … zsoga
20. Bramus! Oct 12 2007 / 8pm

    @ zsoga: that impor rule should be one of the first lines of your actionscript for a given frame/object. The star does not need replacement, as it stands for “anything” contained in the flash.external package. The onrelease still needs to be there, as it’s hooked to an element on the stage.

    I suggest you read up on Actionscript a bit, just Google it and you’ll find lots and lots of tutorials (kirupa.com, actionscript.org, etc.)
21. Martin Austin Oct 16 2007 / 2pm

    Is there a way to make this simply show the progress, rather than having it fill the bar each time the page is loaded? While I like the effect, just a static bar is what I’m looking for.

    Thanks, nice work!
22. T-Rex Oct 28 2007 / 2pm

    Hi, great script!!!
    I would like to implement it in my upload form to show the upload progress in real time, but i am newbie to Ajax.
    I saw the demo for ajaxprogressbar. How can i get the byte downloaded and then attach to it a percentual?
    Ehm.. sorry about my orrible english

    Bye
23. Bramus! Nov 08 2007 / 11pm

    @Martin: planning on rewriting jsProgressBarHandler … will implement that

    @T-Rex: uploading a file through AJAX cannot be done (src)
24. Joel Nov 20 2007 / 6am

    would it be possible for you to post or send the source of ajaxprogressbar.php? would be very helpful.
25. Bramus! Nov 20 2007 / 12pm

    @ Joel: That’s just a dummy 1-line script that waits a few seconds (using the PHP sleep() function) and then echos “Processed Call” when it has finished; nothing spectacular about it.
26. Zvon Nov 24 2007 / 7pm

    Hi,

    The progress bar looks great, but I honestly don’t know how to use it on my site. I have a webpage that takes about 7-8 seconds to load and I would like to use the progress bar to show the progress of the page load.

    Is that possible and in that case how? Can I make the progress bar dissapear once the page has loaded.

    Regards,
    Zvon
27. Bramus! Nov 26 2007 / 3pm

    Hi Zvon, that can’t be possible as you don’t know how long exactly the page will take to load (on a slow connection it can be more than 8 seconds), thus cannot calculate how much % of the page is loaded (the progressbar indicates “loaded X percent”)

    However, you can show a spinner (a spinner indicates “loading”, doesn’t specify a percentage) or something alike. For that I suggest you take a look at how lightbox works (to show an overlay) and to take a dive into the window.load function (or in the case of prototype Event.observe(window, 'load', ....);
28. Paddiii Dec 12 2007 / 6pm

    Hey Bramus,

    i really like your script but i have one question.
    I want to make the progress bars larger than the normal ones. I’ve tried to resize the images but then the script does not longer work.

    Is there any possibility to enlarge the progress bars?

    thanks for answer…

    regards,
    paddiii
29. Laurent Dec 12 2007 / 9pm

    Hi,

    Thanks for your great script ! I would like to use it for my stats package if you are agree. I will allow users to watch the stats being computed when scripts are running (and avoid
    timeout from the web server). I had to make some little changes in your code in order to use it (my output page being sent to the browser while computing, so the page is never fully loaded).

    regards,
    Laurent
30. Dmitry Dec 13 2007 / 2pm

    Hi, Bramus.
    Thank you for your work. I use your progress bar. It looks very nice.
    I would like to propose some improvements if you don’t mind. In `setPercentage` function if to change `setTimeout` call for:
    
setTimeout(this.setPercentage(id,percentage).bind(this),10);

    then we can create our own JS_BRAMUS.jsProgressBarHandler object in any place and use any variable for that. Right now we depend on `myJsProgressBarHandler` and it’s not convenient.
31. Bramus! Dec 14 2007 / 12am

    @Paddiii: should be more easy in jsProgressBarHandler 0.2

    @ Laurent: sure! Glad to see this is helpful to you! What exactly did you need to change? I think your change isn’t needed with the new version

    @ Dmitry: Your suggestion made it into jsProgressBarHandler 0.2 as this one’s a full rewrite and no longer depends on myJsProgressBarHandler (the handler even is optional now!)
32. Laurent Dec 14 2007 / 4pm

    Thanks for your answer ! Glad to see 0.2 coming
    I had to remove the last line because with cgi output, the page is never fully loaded.
    I’ve added the ability to change the progression step (Math.floor(10*prevPercentage)/10 for step 0.1), and so the printing ( percent_value.toFixed(1))
    As I display many progress bar in the output, I’ve added
    $(id + “_percentImage”).style.display = “none”;
    when the bar reach 100%.
    I can send my updated script if you want to include some part in the official release

    Laurent
33. pete Dec 18 2007 / 11pm

    There is a problem with the graphs in Internet Explorer – a mistake pops up – is says: SysFader: iexplore.exe – an unknown exception (0×0eedfade) address 0×7c812a5b

    havn’t found anything in comments or feedback about it
    whats the problem do you think?
    pete
34. Bramus! Dec 19 2007 / 12am

    @ pete : the only thing I find not working in IE is the manual progressbar which gives a JS error in IE6 (works in IE7 though). Don’t know if it’s the same error.

    PS: Note to self: test your shizzle in BOTH IE’s before releasing
35. Ruben Dec 19 2007 / 4pm

    Hallo Bramus,
    Bedankt voor dit super script.
    De progressbar laadt bij mij alleen niet in onder firefox.
    Heb jij enig idee hoe dit zou kunnen komen.
    Misschien komt het door de css die ik naast jouw css gebruik?
36. Bramus! Dec 19 2007 / 7pm

    @ Ruben: dan zou die ook in IE niet mogen werken … werkt de demo bij jou in FX (Hier gebruik ik steeds FX, welke ik ook al m’n scripts standaar in check, dus zou moeten werken …)
37. Ruben Dec 19 2007 / 8pm

    @Bramus dat is het vreemde, script werkt wel in IE, maar in FX lijkt de CSS niet goed te worden ingeladen. Hij geeft een kleine groene balk met het percentage erin geschreven. Lekker Vaag…
38. Bramus! Dec 19 2007 / 11pm

    @ Ruben : test-page available?
39. Ruben Dec 20 2007 / 4pm

    @ bramus nee draait local, maar volgens mij wordt het veroorzaakt doordat ik de boel toepas in phpcake. Ik zal wel eerst een helper moeten maken. pffff
40. Jeremy Jan 06 2008 / 4pm

    I’m trying to use this with my PHP upload script. Can you help me with implamenting this to get it to show percentage of the uploaded file? This may be simple but im baffled.

    I would like the users to bebale to select the files to upload then once they press submit the progress bar kicks in and gives them a readback of the upload percentage complete.

    Is this possible?
41. Bramus! Jan 06 2008 / 10pm

    @Jeremy: what you need to create is a script that can upload and then steer a jsProgressBar instnace via the setPercentage to reflect the percentage uploaded. All you need to do is code a script which returns the percentage while uploading.
42. Jeremy Jan 07 2008 / 4pm

    Ok, I have the script made. It’s a simple php upload script but I am not sure how to do what you stated. I have not worked with js very often and would like to ask if you could help me out. If I send you the script can you modify this then I will overlook the script to learn how you do this?

    It doesnt seem like it would take you long and I would be willing to donate for your help.
43. Bramus! Jan 08 2008 / 10pm

    @ Jeremy : what you need to get is that while uploading PHP returns the uploaded percentage of the upload and then manipulate a jsProgressBar through the setPercentage method.

    Notice that italic part I just wrote above? Well, that’s not possible without an unpatched PHP unfortunately (more info in this article on PHP file uploading I wrote a while back).

    So I’m afraid it’s no-go
44. Roberto Curci Jan 10 2008 / 8pm

    Good work!
45. Bramus! Jan 12 2008 / 6pm

    @ Roberto: thanks! And thanks for the donation too!
46. Narendra Jan 15 2008 / 2pm

    hi Bramus

    Is it possible to use this script together with prototypes Ajax.updater function? For example I have a page which does 5 Ajax-Updates through the Ajax.updater of prototype.

    With Ajax.Responders.register and Ajax.Responders.unregister I can count the requests that are running and finished. So I thought, when I put a myJsProgressBarHandler.setPercentage(’progress’,’+20?); in Ajax.Responders.unregister it should count up until 100%, but it doesnt. If I use the function on generic links (like in your example page) it works fine without problems.

    Im quite new to ajax (and Javascript as whole), so it would be nice if you could give me a tip how to do this.

    Please provide me the source code which you have provided to chris in this discussion

    Thanks in Advance
    Narendra
47. Bramus! Jan 15 2008 / 8pm

    @ Narendra : you might want to take a look at the source of the javascript progress bar ajax demo
48. Narendra Jan 16 2008 / 6am

    Hi Bramus

    I have seen the demo. Its excellent. I need same kind of solution like my ajax event fires periodically and updates the percentage complete from DB and display on a jsp page. so that progress bar show that percentage complete. I have to stop periodical updater after reaching 100% complete. How to stop periodical updater at this moment. Please provide me the solution.

    The demo is excellent. Its greate help if you provide me that source.

    Thanks in advance.
    Narendra
49. Chris Jan 17 2008 / 7pm

    Anyone able to get the “Multi Color Bar” to work in Safari? On 3.0.4, it doesn’t seem to be showing the images (on the demo site). Maybe there’s a quick fix?
50. gachaser Jan 18 2008 / 12am

    Excellent work! Do you have any idea how we can have a commit button to modfiy the .html file to make the progress bar percentages stick across page refresh/reloads?
51. Mateo Jan 18 2008 / 4pm

    Hey Bramus!
    I want to include it in a CMS module. What i need to do additional to add it in the credits and the licence of the jsProgressBar?
    I want to use it in the upload function of the Relay port that i’m implementing demo here.

    Very good work Bramus!
    congrats!
52. Bramus! Jan 26 2008 / 12am

    @ Narendra: that’s something you should find in the PrototypeJS docs

    @ Chris: Even after a reload? It tends not to work when ran for the first time as the images need to be loaded first. Maybe I should build in some preloading stuff

    @ gachaser: at the page that already processed the data (and where the progressbar should “stick”) I suggest you implement a manual PB on it, with animate set to false so that it immediately shows the percentage and does not tween towards that percentage.

    @ Mateo: Just leave my name in the core files If you’re generous you can always provide a link in some sort of readme/help section
53. Chris Jan 27 2008 / 11am

    Yep, even after a refresh, the actual progress color images don’t show up. Just the container image. It works just fine in every other browser (FF [Win/Mac], IE [Win], Opera [Win/Mac], and Camino [Mac]), just not in Safari [Win/Mac].

    I’m kinda stumped on this one… Then again, that’s an easy thing to do!
54. Bramus! Feb 01 2008 / 12pm

    Hi Chris,

    I think the problem has to do with Safari checking differently if the barImage is an array (multiple images) or a string (one image). Will look into that.

    Thanks for informing me about this one.

    Regards,
    Bram.
55. Bramus! Feb 01 2008 / 10pm

    @Chris: fixed in 0.3.0
56. Dan Shelly Feb 11 2008 / 8pm

    secondManualPB = new JS_BRAMUS.jsProgressBar(……
    i think must be new JS_BRAMUS.jsProgressBarHandler(…
57. Bramus! Feb 11 2008 / 8pm

    @Dan: no it shouldn’t. The jsProgressBarHandler object scans the document for span elements to be converted to jsProgressBar instances when called upon. In other words: the handler is a script which creates several progressbars.

    Now, when creating a progress yourself (viz. the manual way), you should invoke it through new JS_BRAMUS.jsProgressBar(..... as you want a new progressbar, and not a scanner which creates progressbars. This is explained in the guidelines and can be seen in the source of the example
58. Dan Shelly Feb 11 2008 / 8pm

    sorry, i has old version…
59. Dan Shelly Feb 11 2008 / 8pm

    @Bramus: i was trying version 0.1, now i upgrade to 0.3 and it’s fixes all my problems (i making multibars whith dynamycly create)

    thanks for that’s greate control!
60. Bramus! Feb 11 2008 / 11pm

    @Dan: I’ve fixed it so that version 0.1 (linked to from many sites) cannot be downloaded anymore, preventing users from having a really really outdated version
61. Jamie Chong Feb 15 2008 / 10pm

    You have a bug in 0.3.0 when you configure the progress bar for animate = false.

    Just add this line:

    this.queue.splice(0,1);

    To your this.options.animate == false if block.

    I hope that helps!

    Jamie.
62. Adam Feb 17 2008 / 6am

    I am trying to implement the js progress bar into a php loop, but it doesn’t actually initiate the animation/display until the php loop finishes.

    Any idea how I can implement it for the loop?
63. Sig Feb 17 2008 / 9pm

    Hello Bramus, your script is great but I have a issue with it.
    I followed your instructions but when I submit the form the bar doesn’t start.
    You can see my code here
    If you could take a look and let me know what I’m missing it will be great.

    Thanks and have a nice day!
64. Adam Feb 19 2008 / 11am

    Great piece of software! I use it for multiple instances within software applications. I will send you links to software on wed. Thanks again. Have you released the tutorial for creating your own bars yet? Or should I go on ahead with creating my own for people?
65. Adam Ellis Feb 19 2008 / 11am

    Also I would like to add that there has been a new release of prototype software may want to add it to your latest 3.0 release.
66. Bramus! Feb 20 2008 / 7pm

    @Jamie: Thanks for spotting the bug! Fixed in 0.3.1

    –

    @Adam: that’s because PHP will only output (viz. send the generated data to the browser) after it has finished. That can be bypassed by using some Ouptut Control Functions such as ob_start, ob_flush and the alike.

    However, jsProgressBarHandler still will not kick into action as it hooks itself on the ready state of the DOM; That can be bypassed by manually creating a progress bar.

    Other scenario is to output a holder for your progressbar and then use some AJAX-magic to get the state of the loop and update the progressbar.

    –

    @Sig: You’ve hooked the manualPB2.setPercentage('0'); to the submit event of the form, which sets the percentage to 0 on the progressbar.

    What you need to do instead is start an AJAX-call on an interval which gets the percentage of the file currently being uploaded. In the onSucces method of that call you then set the percentage via manualPB2.setPercentage(percentageReceivedThroughTheCall);

    Oh, and to say I’ve never worked with RoR before; That code reads like a hot knife sizzling through some butter!

    –

    @Adam: See this reference for the time being.

    –

    @Adam: Latest Prototype (1.6.0.2) added in the 0.3.1 release
67. Sig Feb 20 2008 / 7pm

    Thanks Bramus
    even if I’m not sure I know what to do
68. Bramus! Feb 20 2008 / 7pm

    @Sig: don’t worry. I’m planning on showcasting a PHP upload demo with progressbar any time soon (don’t expect it by the end of the month though)
69. Sig Feb 21 2008 / 11pm

    I look forward for it and I hope I will be useful even for Rails developers

    Have a nice day!
70. AdamM Feb 25 2008 / 12am

    I’ve changed my name to AdamM to differentiate myself from the other Adam. I was the one asking about using the progress bar in a php loop.

    Other scenario is to output a holder for your progressbar and then use some AJAX-magic to get the state of the loop and update the progressbar.

    Care to explain?

    @Adam: See this reference for the time being.

    Was this directed at me or the other Adam.

    Thanks in advance!
71. Bramus! Feb 26 2008 / 12am

    @ AdamM: Here’s a little scenario:

    1. Output your page with a progressbar set to 0% (see the static code examples); you don’t need any php for this
    2. When the page has loaded, hook a function to the load event of the window Object (via the Event.Observer in Prototype)
    3. That function should first call a PHP script that starts your loop.
    4. When that first script is called, the function should call a second PHP script which gets the status of the loop you started in the first script (maybe the first script should write the status somewhere to disk?)
    5. Upon getting the status of the loop (through the second script), update the progress bar to reflect that percentage
    6. if the percentage is smaller then 100, re-call the second script to get the updated status.

    @AdamM: reference was to the “other” Adam on how to create your own progressbar images
72. Glauco Mar 27 2008 / 5pm

    Hi,
    I trying to load jsProgressBar like this without sucess:

    XMLRequest req = new XMLHttpRequest();

    req.open(“GET”, urlToJsProgressBar, true);

    data=req.responseText;
    node.innerHTML = data;

    Any suggest?
73. Bramus! Mar 30 2008 / 9pm

    @Glauco: if you set the innerHTML of something to “82″ for example, quite obviously no progressbar will be created.

    After assigning the value, you should create a new jsProgressBar instance, as described in the manual creation/instantiation.

    Alternatively you can create on at page load (at 0%; again see manual part) and then call setPercentage with the reveived data (which should be a number)
74. Mark Apr 02 2008 / 9pm

    Hi,

    Congratulations for this nice script!

    I didn’t find the way to personalize (manual creation of progress bar) starting with the given ajax demo!

    Is ther a way to do this by modifying the event observer?
    Event.observe(window, ‘load’, initProgressBarAjaxHandler, false);

    Could you provide an exemple?

    Thanks for your support
75. Bramus! Apr 02 2008 / 11pm

    @Mark: open up jsProgressBarHandler.js and set autoHook to false (line #29). Then check the normal demo (linked above) and check out lines 164 – 193
76. Mark Apr 03 2008 / 9am

    Hi Bramus!

    Thanks for your answer!

    I set the autoHook to false, but didn’t found the way to set up the MultiColor bar provided in your demo, but in AJAX mode!?

    I tried the following:

    function initProgressBarAjaxHandler() { myJsProgressBarAjaxHandler = new JS_BRAMUS.jsProgressBarAjaxHandler(
    $(‘progress’),
    0,
    {
    barImage : Array(
    ‘../../_scripts/progressBar/images/bramus/percentImage_back4.png’,
    ‘../../_scripts/progressBar/images/bramus/percentImage_back3.png’,
    ‘../../_scripts/progressBar/images/bramus/percentImage_back2.png’,
    ‘images/bramus/percentImage_back1.png’
    )
    }); }
    Event.observe(window, ‘load’, initProgressBarAjaxHandler, false);

    … but the jsProgressBarAjaxHandler class doesn’t seem to manage options !?

    Would you have an exemple ? And I also have troubles using IE.

    Thanks again
77. Bramus! Apr 03 2008 / 10am

    Mark, you need to invoke a JS_BRAMUS.jsProgressBar, not a JS_BRAMUS.jsProgressBarAjaxHandler nor a JS_BRAMUS.jsProgressBarHandler
78. Yan Apr 09 2008 / 9pm

    I noticed on the multi-colored example it takes a while to reload colors. I think it would work much better with styling than image backgrounds, which I suppose is the case. Great project othersise
79. Andres Apr 14 2008 / 5pm

    Good work!!
80. Linus Apr 24 2008 / 11am

    I’m working on a update for my works website. And needed a progressbar for it. And thought this looked amazing. Problem though it dosent work.. And I can’t find the problem. I followed your instructions and so on. But nothing. I’m using JSP for coding. And mainly IE7
    Aren’t a browser problem due to I tried in mozilla too with same luck. Seems to be a problem with import of the .js or something. Or maybe problem with vars
81. Bramus! Apr 24 2008 / 11am

    @ Yan: tried bypassing that by preloading the images, yet IE abruptly throws errors on it

    @ Andres: thanks!

    @ Linus: any (temporary) link available where I can take a look at your problem?
82. techphets Apr 26 2008 / 8pm

    I’m a JavaScript noob and I was wondering if you could explain exactly what that AutoHook feature does? I’ve set it to true and false but the demo still runs the same way…

    It looks to me like it simply creates a second jsProgressBarHandler after the page finishes loading?
83. Linus Apr 29 2008 / 12pm

    I worked it out. Was something wrong with my placement of the code in my current code.
    I sent you another comment though. On some other prob
84. Greg May 06 2008 / 6pm

    Hi Bramus,

    great work, I really like it. Especially the ajax demo is very interessting. But I´m a beginner and wondering what code is in the “ajaxprogressbar.php” file. Could you please describe it or post the code?

    Thanks
    Greg
85. Hakan Erdo?an May 06 2008 / 11pm

    Hi,

    Congratulations for this nice script!

    I didn’t find the way to personalize (manual creation of progress bar) starting with the given ajax demo!

    Is ther a way to do this by modifying the event observer?
    Event.observe(window, ‘load’, initProgressBarAjaxHandler, false);

    Could you provide an exemple?

    Thanks for your support
86. Adam May 09 2008 / 5am

    http://jquery.com/

    Is it possible to make this software compatible with jQuery and not prototype. Or both?
87. Adam May 09 2008 / 7am

    Here is why:
    http://www.prototypejs.org/api/array

    Prototype does some serious modification to the Array prototype, which tends to break “for(var x in arr)” constructs. Which is used a lot in Vbulletin core. Is there a work around for this does your bar use this type of back-end of prototype or can I eliminate a large portion of Prototype to make both work together and play nice.
88. Ran May 11 2008 / 1pm

    Hi Bramus,

    Thank you for a great progress bar.
    I have one problem. The progress bar disappears after an ajax calls to the server. You any idea why? Thanks
89. Bramus! May 15 2008 / 5pm

    @techphets: When set to false no automatic progressbars will be created; only the manual ones will come through.

    @Greg: it merely is a PHP script with only 1 line in it: sleep(x); to fake some delay that could be cause by some processing.

    @Hakan: Check the normal example, not the Ajax one (scroll down in the sourcecode of the HTML)

    @Adam: Been gooffing around with jQuery for about 9 months by now (nearly dropped all Prototype development) but the only problem is that jQuery doesn’t support classes from within the library itself (it however can be done manually, but I don’t like that method). On the other hand, I urgently need to check out Low Pro for jQuery by Dan Webb, as he’s ported the Class.create() functionality to jQuery

    @Ran: any demo link?
90. Adam May 17 2008 / 2am

    Yeah let me know the outcome. I am in need for a fix asap. Thanks for all your help and software A++
91. techphets May 18 2008 / 5am

    I’d love to see a jQuery version. I’m thinking about using the Webappers version so that I can use jQuery instead of prototype.

    Has anyone managed to use prototype and jQuery together with these progress bars?
92. Bramus! May 18 2008 / 12pm

    @Adam: You can use jQuery and Prototype (or any other library) together without any troubles
93. Jean May 18 2008 / 2pm

    I am having some huge problems with jQuery and vBulletin also. I have tried all fixes from the jQuery link you’ve posted above and have not gotten it to work with my other javascripts (highslide, dock menu, jQuery).

    Is this because the script uses $?

    Any info or help would be greatly appreciated!
94. Jean May 18 2008 / 2pm

    Wohoo I just got it to work!!!!!!!!!! 2 Hours of playing around but I got it. Thanks, this is great stuff.
95. Jean May 18 2008 / 11pm

    Hi Bramus,

    I was wondering if you knew of any way to speed up the loading of the progress bars. I am currently using them to show Quiz Statistics and I have about 5-7 of them showing simultaneously but it takes a good 5-6 seconds to show before they start their animation (in Firefox).

    It looks like they only start looking for the spans once the entire document is finished loading.

    Any help would be greatly appreciated!

    Thanks.
96. Jean May 19 2008 / 3pm

    Hi Bramus,

    I have done the following modifications to the .JS and thought I would share with other people who also wanted the same results as me.

    1. I preloaded the images using:

    if (document.images) {
    img1 = new Image();
    img1.src = “progressbar/images/bramus/box.png”;
    }

    2. Replaced Loaded Line in Handler Function

    Event.observe(window, ‘load’, initProgressBarHandler, false);

    with

    document.observe(‘dom:loaded’, initProgressBarHandler, false);

    Thanks for this nice script, it really works well now that these small modifications were done.
97. Ederico Rocha May 19 2008 / 9pm

    Bramus, this is one devilish piece of hot js candy.
    I was trying to use it to execute several instructions , and I would like to know how can I do the progress in a for loop manner silently, without showing anything but the bar itself.
    If this is possible can you give a few pointers ?

    Thank you very much
98. JoeP May 21 2008 / 4am

    Beautiful script.
    Is it possible to create a multi colored bar automatically? I want to show a bar representing used disk space and I would like it to change color as disk space changes.
    Thank you.
99. Adam May 21 2008 / 10pm

    The issue is I can “NOT” use prototype at all because of conflicts I specified above. So your saying by the above statement I can use jQuery instead of prototype and your system will work fine. To my knowledge and what you said earlier is that is has issues with classes. So please explain a little further for me. I need a fix for prototype or use another library because of how prototype handles the above stuff I already stated. Thanks for your help.
100. Adam May 21 2008 / 10pm

     YUI by default is part of Vbulletin as well is there a way to just use that system to work with your software that way I wouldn’t need to add another library to the system?
101. Bramus! May 27 2008 / 10pm

     @Jean: Event.observe(window, ‘load’, initProgressBarHandler, false); is a leftover of previous Prototype releases. Should indeed be replaced with document.observe(’dom:loaded’, initProgressBarHandler, false); (which got introduced in 1.6). Will update so in the next version.

     @Jean bis: a few weeks ago I experimented with preloading images, yet IE turned out to be one massive failure at it, even breaking the normal progressBar behavior.

     @Ederico: check out the manual examples and then call myManualPB.setPercentage('98'); for example

     @Joep: Edit the defaultOptions variable in jsProgressBarHandler.js so that barImage is an Array, as seen in the manual examples.

     @Adam: What I said is that you can continue to use jQuery for all the stuff on your site (instructions at the link I posted before) without it conflicting with the (extra) Prototype.js include as jQuery plays nice with other libraries
102. Gary May 28 2008 / 9am

     excellent work dude,
     beautiful script =)
     would love to see a jquery version of this too.
103. Adam May 29 2008 / 6am

     I don’t think you get what I am saying. I can NOT use Prototype because of how it handles the for statements. It conflicts with Vbulletin. So I can not use/load prototype on pages where it conflicts with VB. So I need another solution. Your software seems to only work with Prototype. So I was wondering if your software will work with YUI or any other js package. I prefer YUI since it is the best and comes default with Vbulletin. So the combining of two jquery and prototype is not an issue it is prototype it self and that your software requires it.
104. Adam May 31 2008 / 10am

     I researched it more and seems I would have to code my own class function type system. I may just do that. I need code as slim as possible cause this code gets called a LOT and need it super fast. Let me know if you have any other ideas.
105. Bramus! Jun 03 2008 / 10pm

     @Adam: Ah, forgot about the Vbulletin conflict. *oops*

     Anywho, you might want to check out Low Pro for jQuery. Dan has done an excelling port of Prototype’s Class.create() capabilities to jQuery.
106. Oliver Jun 08 2008 / 9pm

     Hi, thanks for this great script!

     I am wandering if there is a way I can temporarily disable the animation when setting the progress bar back to zero? I ideally want a sort of clear function which overrides the animation property. Thanks.
107. Tigran Jun 25 2008 / 7pm

     Anybody can help me, please?

     I need to full the 100% in 60 seconds, How I must do it?

     Thanks
108. Richard Jul 02 2008 / 10am

     Hello,

     I’m a newbie to Javascript.

     I got a problem in using the setPercentage function.

     Here is the code:

     Event.observe(window, ‘load’, function() {
     // first manuale progressbar : different bar (width, height, images) and no animation
     manualPB = new JS_BRAMUS.jsProgressBar(
     $(‘myElementId’),
     5,
     {
     ……..

     I tried to change the percentage with the following code:

     function setMyFields(Result, Counter) {
     manualPB.setPercentage(Result);
     }

     But I get an error message:
     manualPB is undefined

     If think it is a trivial newbie problem.

     Can someone help?

     Greetings
109. Ah Jul 07 2008 / 4pm

     Hello,

     It doesn’t seem to handle decimal values eg 50.75% etc. Any suggestions ?

     Thanks
110. Skitsko Jul 12 2008 / 12pm

     // Perform some Ajax Calls
     <?
     for($i=0; $i
     new Ajax.Updater(‘box’, ‘ajaxaddfile.php?filename=&genre=&location=&date_add=’, {
     parameters: { sleep: 1 }
     });

     I have some problem! If there more that 100files …101 and etc! It does’nt work at all! Do’nt work anything…. but if there 99 – it works. WTF?
111. Skitsko Jul 12 2008 / 12pm

     
// Perform some Ajax Calls
<?
for($i=0; $i
new Ajax.Updater('box', 'ajaxaddfile.php?filename=&genre=&location=&date_add=', {
parameters: { sleep: 1 }
});
112. sweet Aug 02 2008 / 7am

     I want to make a progress bar for my website where many students will login at a time and i want progress bar to display the % of time left for a person to get to his home page.Can you help me doing this
113. Amr Tamimi Aug 04 2008 / 4pm

     Hi,
     Great project, useful and helpful

     but can I know how to get the background of the bar from the right cus i’m using RTL language !
     Thanks in advance
     Amr
114. Jade Aug 05 2008 / 3pm

     can you translate the Manual to chinese ? thanks !
115. nblracer Aug 05 2008 / 4pm

     I have the same problem as Richard i think. I’m new with JS, but i think the myJsProgressBarHandler is not within scope of my other scripts that are trying to modify it.

     I tried to work around it by creating my own jsProgressBarHandler within my own script, but every time i do that i always get the progress bar working in reverse, going into the negative range, never ending.
116. Bramus! Aug 09 2008 / 11pm

     @Oliver: Not possible … unless you mod the script: Replace line 200 (if (this.options.animate == false) { with if ((this.options.animate == false) || (targetPercentage == 0)) {

     @Tigran: init a manual jsProgressBar (see documentation and comments above), start a javascript timer and at each tick, increment a param named tickCount for example and then call setPercentage on your local jsProgressBar instance. (myManualPB.setPercentage(tickCount); for example)

     @Richard: if you get an error like that, then it means your manualPB var didn’t get inited (this is normal javascript, has nothing to do with jsProgressBarHandler ). Now, question is: when do you invoke setMyFields? Reason I ask is that manualPB doesn’t get created until after the document has fully loaded (and your setMyFields function might get called gefore that)

     @Ah: nopes, that’s not supported (yet?)

     @Skitsko: your code seems to be truncated? Can you fully post it?

     @sweet: read a bit up on the manual creation of a progress bar (see docs & comments above) and be creative with javascript timers.

     @Amr: Created a flipped version of the image (where the filled part is on the left, and the non-filled part on the right) and then adjust the calculation part in the code at line #272 to something like (untested though, could be wrong!) from (this.initialPos + (percentage * this.pxPerPercent)) to (this.width - this.initialPos + (percentage * this.pxPerPercent))

     @Jade: erm … I don’t speak Chinese

     @nblracer: most likely the same thing as Richard indeed: when exactly does your script get executed? The progressbars don’t get inited until the document has fully loaded (and not when the DOM has been loaded!)
117. Mark Aug 12 2008 / 3am

     How can i include my page so if he is finish loading the page is showing
118. Deltafox Aug 18 2008 / 1am

     how i can use this script into a whit onsubmit= function?

     I need to display upload progress bar only when i click on send button on the form for upload file..

     it is possible?
119. Dmitri Aug 29 2008 / 8am

     Hi,

     This is a really beautiful looking control – thanks for that!

     Any thoughts on adding an “indeterminate” mode (a la Swing)?

     Either display a small chunk of the bar cycling back and forth, or even just continue the animation with a full bar (so the stripes move across).

     Thanks
120. Joe Sep 02 2008 / 12am

     Nice control!
     I have an upload form, which loads with Ajax, and has a where all the notifications are displayed. I use an iFrame as the target to upload the file and then read the file (a txt file) and do some processing with it.
     As the processing advances, I want to update the on the parent page with the progress bar.
     Right now I do this:

     var parDoc = window.parent.document;
     parDoc.getElementById(‘upload_status’).innerHTML =;

     This works perfectly, but I would like to add the progress bar.
     Any ideas on how to?
     Thanks
121. Jack Sep 07 2008 / 4am

     In your 8/9/08 post:
     line 200 (if (this.options.animate == false) { with if ((this.options.animate == false) || (targetPercentage == 0)) {..

     I have tried that and if you set the targetPercentage to 0 the first time, then it will keep updating $(this.id + “_percentText”).update(“” + percentage + “%”); forever with all ‘1’s when you try to set targetPercentage to any other number.
122. Jack Sep 07 2008 / 9pm

     FYI. For my previous post, I need to modify one line in the same function in order to get it to work properly.

     Change
     // get the current percentage
     var curPercentage = this.percentage;
     To
     // get the current percentage
     var curPercentage = parseInt(this.percentage);
123. Jack Sep 07 2008 / 10pm

     Further more, I am wandering if there is a way I can reset the progress bar back to zero while the progress bar is running? (eg. I want to cancel the loading process during loading). Thanks for your help.
124. Simon Sep 10 2008 / 1pm

     Oh man, that’s such an awesome and useful piece of Javascript – definently gonna download
     I would also like to know the answer to Jack’s question
125. Kevin Sep 19 2008 / 6pm

     Hi Bramus,

     Great little widget — thank you! I encountered one bug while running this in IE 7 and it is related to IE-Prototype interaction. I was getting “Object doesn’t support this property” errors on line 118 — this.el.update. IE doesn’t work with Prototype extending elements so you have to do it manually by passing the id or reference through $(). I fixed it by simply changing to $(this.el).update

     Hope that helps, and keep up the good work!
126. Gabrola Oct 03 2008 / 11pm

     How do I make the progress bar fill from 0% to 100% in 30 seconds i tried to use the setinterval and interval was 1 second and every time it did a +(100/30) but when it was moving it was like teleporting to the other position. I want it to move slowly
127. Chris Oct 15 2008 / 7am

     Bramus, first of all great stuff
     But probably due to lack of real js skills, I can’t make it do what I want

     I’ve included this in my header:
     <script type=”text/javascript” src=”#application.stApplicationData.sJs#progressbar/prototype.js”>
     
     <script type=”text/javascript” src=”#application.stApplicationData.sJs#progressbar/jsProgressBarHandler.js”>

     0%;

     This works, no problem.

     And after that I’m trying to update the ProgressBar after each executed query, since I want the user to know how long the pageload will take…
     But since this isn’t invoked by a mouseclick, I don’t know how to use the:
     myJsProgressBarHandler.setPercentage(‘ProgressBar’,'+5′);

     …
     As I said, not quite skilled in js yet…
128. Chris Oct 15 2008 / 7am

     Hmmm apparently I should’ve used code tags…
129. Craig Oct 15 2008 / 7pm

     In the multi-color progress bar, how do I change the values of where the red/yellow/green change? I would like to have red be 1-50, yellow 51-75, green 76+.
130. Sascha Hennig Oct 20 2008 / 6pm

     Nice piece of coding this is. I still have some issues with it though and even though I am trying to work them out myself I thought I might mention them here:

     Opera 9.52 does not correctly display the progressbar – on the left hand side there is one pixel cut off – havent found a fix yet.

     Now the second thing is a bit hard to explain me thinks ^^ Instead of moving the progressbar image over the background to achieve the “filling-effect” it would be better imho (though harder too) to have some other image (plain white, or whatever) move over the already 100% filled bar. It does not matter in many situations but if you want to use bars wich have a dithering effect (from left to right), doing it your way will not look right (i.e. the right hand side color will always be at the current percentage position instead of that color part of the progress bar which represents the current percentage).

     Hope it was clear enough – else maybe quickly create a dithered bar (left to right not top to bottom, etc.) and have a look yourself – if you care )

     And before I forget: thx a lot!
131. Samuel Oct 28 2008 / 9am

     Dear Bramus, I see you are keeping up with users requests for help via this comment thread, please could you simply tell me if I my use this load script before my webpage loads.

     I read above somebody with a similar question but everybody’s different.

     Many thanks.
132. Samuel Oct 28 2008 / 2pm

     Oh wait a minute, perceiverance got me there. Well sort of, the images for the percentage bar load after the site loads, so I need some pointers as to what I need to do in order to get the percent meter going first.

     http://lovelago.googlepages.com/flow4f.html

     Thanks.
133. Adam Nov 02 2008 / 9am

     Just want you to know Prototype 1.6.0.3 is out and everything is A ok. Not sure if you want to update your download to reflect it.
134. Adam Nov 02 2008 / 9am

     Also if you can confirm this as a fix and A ok to use:
     Kevin Sep 19 2008 / 6pm

     this.el.update => $(this.el).update

     His post talks about the IE issue I have encountered this as well but mine is very random and intermittent not all the time. I am going to try his fix but want your feedback on it.
135. Adam Nov 02 2008 / 9am

     Sorry for posting again just wanted updates to all this

     Change
     // get the current percentage
     var curPercentage = this.percentage;
     To
     // get the current percentage
     var curPercentage = parseInt(this.percentage);

     Is this a fix for the unlimitted loop issue the guys was talking about??
136. Adam Nov 02 2008 / 9am

     Sorry for spamming if I could edit the other messages or join them I would please do so at your transgression. Last but not least any way this can work with YUI class system? I am loading prototype just to run your script and really rather use YUI which is already present on every page. Thanks again.
137. dawez Nov 02 2008 / 4pm

     Hi a nice addition would be to add a callback function like this:

     in default options:
     callback : function() {/*empty callback*/} // function to execute at 100%

     and then when the percentage is 100% just call this callback.
     this.options.callback();

     In this way the callback can be passed in the constructor line really simply.

     new PROGRESS_BAR.jsProgressBar($(‘myElementId’), 0, {animate: true, callback:addImg});

     that’s it
     Davide
138. Jack Nov 05 2008 / 3am

     Adam:
     1. I believe the “this.el.update => $(this.el).update” fix is specifically for IE7 and it won’t hurt when you use other browsers
     2. The change to “var curPercentage = parseInt(this.percentage);” is to avoid the infinite loop if you want to stop the animation while you reset the progress bar to 0%

     Hope this help
139. Bramus! Nov 05 2008 / 9am

     Dear all,

     thanks for your feedback, extremely appreciated! Will be implementing the fixes mentioned sometime this week

     B!
140. Bramus! Nov 10 2008 / 11pm

     jsProgressBarHandler 0.3.3 has been released. Please refer to that page for documentation on the onTick callback function
141. Craig Nov 12 2008 / 5pm

     Bramus!, is there a way to change the percentage values of where the colors change in the multi-color bars?

     Red=0-25
     Orange=26-50
     Yellow=51-75
     Green=76-100

     Would like to have these values able to be defined.
142. Nico van de Kamp Nov 14 2008 / 3pm

     Hello Bramus,

     Great JOB!
     I see that this issue have been mentioned earlier: updating/refreshing progressbar. I’m working with asp and I want to read data from Excel. This is working fine but it takes a while.
     I thought I will use a progressbar.After reading the data from excel, the progressbar is running to 100%.
     So that need a refresh.
     Maybe other improtant thing: it’s a popup window which will be closed after all the data has been read.

     How can I refresh a popup (or div), so that if the progressbar has some progress is shown.

     I think it can’t be solved with AJAX because it has nothing todo with client server. It’s all on the client side. (Because I think AJAX will only be used to get (refresh) some specific data from the server without refreshing the complete page. Correct me if I’m wrong)

     Sometimes is said go to make a manual progressbar, but I don’t understand what I must do and/or implement. I’m new to AJAX maybe is that the problem.

     I hope somebody can inform me what todo OR is refreshing of a popup (div) not possible while reading data from excel file?

     Thanks in advance.

     Nico van de Kamp

     P.s. I thought that I had last weak asked this question but I don’t see at the “Trackbacks/Pings” or in the “Comments”
143. Eric Lubin Nov 23 2008 / 8am

     I am using the manual way to create the progress bars. I add the two scripts to my header and i added the container, exactly how you specify. Then when I run

     ManualPB = new JS_BRAMUS.jsProgressBar($(‘element1′), 50);

     it continues to work. However, when i try to then use the setPercentage function by doing, for example,

     ManualPB.setPercentage(‘element1′, ‘50′), it responds by giving me NaN% as the text of the percentage and the actual percentage bar doesn’t budge from 50%. Then, if i try to remove the qutoes from ‘50′, it is stuck in a an infinite loop backwards.

     How would I use the setPercentage function with the ManualPB that i created?
     thanks in advance
144. Aaron Nov 25 2008 / 3pm

     This is awesome…

     Just curious…I am creating a SPAN element with document.createElement(“SPAN”). I have given this element the class name “progressBar” and a unique ID. But it doesnt auto attach. Is there a better way to add the progress bar to an automatcly created SPAN element?

     Thanks.
145. Adam Dec 05 2008 / 6am

     Works perfect the latest update thanks so much also like to mention prototype is on 1.6.0.3 and you have 1.6.0.2 in the zip Not a huge deal at all
146. Darryl Dec 06 2008 / 12pm

     Looks like a nice control, but it doesn’t work for me. Tried everything, swapped out my prototype.js file for yours, changed where i place the span based on one of the comments here already, but nothing, nada. In IE I get a shadowdropped box, and in FF I just get two “15%15%”.

     Problem with these JS controls you don’t know where to begin looking and what of 100 possible things you could have not done right because it depends on so many variables to work.

     Oh well, woulda been nice to use. Pity.
147. Martijn Dec 09 2008 / 1pm

     @mark.

     i’m not a wonder at Javascript. but this is how i get the page to load when the progressbar finished.

     document.observe(‘dom:loaded’, function() {

     manualPB2 = new JS_BRAMUS.jsProgressBar(
     $(‘element1′),
     100,
     {
     onTick : function(pbObj) {

     switch(pbObj.getPercentage()) {

     case 100:
     window.location=”http://www.google.com”;
     break;

     }

     return true;
     }
     }
     );
     }, false);

     put this under this line:
     100%
148. Martijn Dec 09 2008 / 1pm

     hmm… that’s no right…

     put this somewhere in you’re body:

     document.observe(‘dom:loaded’, function() {

     manualPB2 = new JS_BRAMUS.jsProgressBar(
     $(‘element1′),
     100,
     {
     onTick : function(pbObj) {

     switch(pbObj.getPercentage()) {

     case 100:
     window.location=”http://www.google.com”;
     break;

     }

     return true;
     }
     }
     );
     }, false);

     (you might wanna take those spaces away in those ’script’ tags tough…)
149. Martijn Dec 09 2008 / 1pm

     noooo way… an edit would be nice…
     hmmm.. another try..:

     script language=”javascript”
     document.observe(‘dom:loaded’, function() {

     manualPB2 = new JS_BRAMUS.jsProgressBar(
     $(‘element1′),
     100,
     {
     onTick : function(pbObj) {

     switch(pbObj.getPercentage()) {

     case 100:
     window.location=”http://www.google.com”;
     break;

     }

     return true;
     }
     }
     );
     }, false);
     /script
150. Martijn Dec 09 2008 / 3pm

     @Darryl

     i had that problem too with those two 15%15%, i had it inmediently fixed..
     maybe it works for you to…

     check your image url…
     check jsProgressBarHandler.js on line 46 and 47. . .
151. Ignorance Dec 16 2008 / 11pm

     Ignorance is bliss eh?
152. Mike Dec 17 2008 / 6pm

     I have the same question as Craig. Is there anyway to adjust the predefined percentages?
153. Dave Jan 13 2009 / 1am

     Nice control. Just one problem…

     I am using the progress bar to make the user wait whilst loading initial data for a large AJAX application.

     When I start up Firefox 3.0.5 and go to my URL, the progress bar reports a Javascript error on line 404 of jsProgressBarHandler.js saying ‘this.id + “_percentImage” does not exist’ (it’s null). This error stops the application load. Refresh the application and it works just fine.

     The problem doesn’t occur in IE 7 (that must be a first!) but does occur with Safari 3.2.1 and with Safari, refreshing doesn’t get round it.

     Any ideas?
154. ET Jan 16 2009 / 5am

     Nice toy but why don’t you add some sample scripting to aid others in using it. This would only make since if you want others to use it and not have to use this comment section so much. I may me a noob and maybe you only like receiving positive comments about your work but I’m having the same problem as the post “Jeremy Jan 06 2008 / 4pm” and I think your reply was very unprofessional and that’s putting it nicely. What kind of help was that? Why don’t you post a real response with an example script so us noobs can also pretend to be as smart as you. He was even offering to make a donation. If I offered my work to the world I sure would be more helpful than that. Me
155. Franky Jan 24 2009 / 1pm

     Where can I change the speed, please?
156. Bramus! Jan 27 2009 / 6pm

     @ Craig (Nov 12 2008 / 5pm) / Ignorance (Dec 16 2008 / 11pm): Play with options.barImage which you set generally (or per progress bar).

     If you define 1 image, it is the one image for the full 100%
     If you define 2 images, 50% will show the first image the next 50% (51-100) will show the second image.
     If you define 3 images, the first 33% will show the first one, the next 33% (34 – 66) will show the second image, …
     –> in your case you need to set 4 images.

     –

     @ Nico van de Kamp (Nov 14 2008 / 3pm):

     Maybe you could play around with window.location.reload() and a timer?

     –

     @ Eric Lubin (Nov 23 2008 / 8am):

     Make sure you don’t use curly quotes as you posted. Think that is the wrongdoer there.

     –

     @ Aaron (Nov 25 2008 / 3pm):

     Yes that’s possible, see the manual creation of progressbars.

     –

     @ Adam (Dec 05 2008 / 6am):

     Will bundle an updated version whenever a new release is due.

     –

     @ Darryl (Dec 06 2008 / 12pm):

     Any sample link for me to check out your problem? Have you tried what martijn said?

     –

     @ Mike (Dec 17 2008 / 6pm):

     See first reply in this reply here

     –

     @ Dave (Jan 13 2009 / 1am):

     Make sure you don’t invoke a new progressbar when the page is still loading. Wait for the document to have loaded its DOM entirely.

     If this is the case already: any sample link where I can check out your problem?

     –

     @ ET (Jan 16 2009 / 5am):

     A (partial) manual already is posted on this page itself (↑) and the examples are there to study. Feel free to post your own tutorials on the interwebs.

     –

     @ Franky (Jan 24 2009 / 1pm):

     On line 363 (in the current build), change the 10 in this.timer = setTimeout(function() { this.processQueueEntry(targetPercentage); }.bind(this), 10); to anything you like in order to speed it up.
157. Marco Feb 05 2009 / 11am

     I used your demo as example to test the script with differant images. The images are made with paint and saved as .gif. With this images the script is not working.
     I also opend and saved as your custom1 images in paint, after that the bar is also not working anymore.

     Wat are te specifications of the image files to use?
158. Denzil Fillis Feb 06 2009 / 10pm

     Hi there,

     I have built a web application and would like to use your progress bar. What must I change in your javascript to tell it where to find the images.

     best regards
     Denzil
159. Miria Mar 03 2009 / 3am

     Hi,
     I have the following code:
     ”

     Teste

     function teste(){
     var span = ‘15%’;
     document.body.innerHTML = span;
     }

     ”

     My problem is:

     When I put the tag inside the body of the page it works perfectly.

     But when I put it in a script and put onload inside of does not work.
     What should I do?
160. Remi Mar 03 2009 / 1pm

     Hi

     Is it possible to see the script of update.php from the ajax demo, thanks

     Remi
161. Remi Mar 04 2009 / 12am

     It works !!!!!!!!!!!
     please just delete my posts

     Great work
162. Hexim Mar 08 2009 / 6pm

     Help me pls. I test this http://www.bram.us/demo/projects/jsprogressbarhandler/ajaxprogressbar.html but in this script is all php scripts on server called in same time. But I need call first php script width start and end timestamp (output: server script is done after X second) and when is first php script is done after call second php script width ajax.

     Sory for my En. lang.

     Very THX
163. Jeremy Mar 11 2009 / 4pm

     1) Great work fella.
     2) Found a bug / feature that may be useful for others to know;-

     Installed as per the instructions and managed to make it work with a manually created multi-color bar. BUT the whole thing was about 15px wide.
     I searched and searched and could not see why the values i was using for width were not being picked up.

     FIX: in the jsProgressBarHandler.js the values for boxImage and barImage had the wrong path for my system, even though i was defining which images to use in the html page.

     Anyway, all working but NB: paths need to be working even if you don’t think you are using that variable (e.g. the defaults in the js file).

     Hope this helps and thanks again.

     Jez
164. jianxia Mar 18 2009 / 7am

     setPercentage fun has bug if set a float number. it will be negative Percentage.for example setPercentage (‘+0.05′)
165. Juhana Mar 19 2009 / 4pm

     I have a problem with the progress bar. It works fine and I am able to chage it with a button click. However I am atempting to increment the counter with a javascript but i am not able to do it e.g. do the following (scrip tag is wrong due to blog limitations.

     script type=”text/javascript”
     myJsProgressBarHandler.setPercentage(’myElementId’,’80?) /script

     After the progress bar has been created I could dynamically change it from javascript script tag. Thanks in advance.
166. Raleigh Mar 26 2009 / 5am

     Just want to follow up regarding the problem of AdamM, is it resolved already? ^^
167. Adam Mar 27 2009 / 3am

     Just an FYI the newest release breaks duel bars loading with your new pre-load images. When I remove your pre-load code it works perfect with it loads only one bar and other bar does not load. Obviously different ID for each bar etc but images are same so presume that is where the preload breaks think it needs a ID tag to identify pre-load for this bar then this bar etc.
168. Fernando Mar 29 2009 / 10pm

     Hi,
     just wanted to say that I used your progress bar in an “file upload progress” example and I loved it.
     See how it looks http://www.alfersoft.com.ar/blog/2009/03/28/file-upload-progress-with-mod_python/
     thanks for this great tool.
169. Hasan Apr 02 2009 / 2pm

     Hi!

     First of all this is a great work!
     I have a question:

     How can i lock the “bar %” to my last settings?

     I want to make a progress bar to show my members,% of my works.
     I put the Program Efficiency to my web and i set it to %70 forexample.And then i finished my special work and set the bar to %100.But when i refresh the page it is %15 again.

     I want to protect my last settings.What must i do?
170. james May 06 2009 / 1pm

     Hi Bramus,

     can barImage be swapped ?

     is like, initially the bar is green, when a failed test is encountered, I would like to swapped the bar to a red bar.

     Can it be done?

     thanks
     prototype newbie
171. Marshall May 09 2009 / 7pm

     Hi,
     I see bramus has not replied for a long time now; i hope someone else could be able helping…
     I’m using the progress bar for a quiz game. as soon as a user click on any answer i’m using manualPB2.setPercentage(‘0′, true); to reset the bar. However the bar will go to 100% and then requires another manualPB2.setPercentage(‘0′, true); to reset it. I’ve noticed that this happens when the bar is in progress. If it’s stopped then there’s no problem.

     So i’d like to know if there’s a function to stop the bar as soon as a button has been clicked…
172. Evgeni May 10 2009 / 6am

     Thanks for creating this great script!
     I’m trying to use jsProgressBarHandler setPercentage in the XMLHttpRequest callback. I’m issuing a new XMLHttpRequest from the callback every time the previous request is done. I’m doing that a few hundred times and want to monitor the progress of the job.
     What happens is that the progress bar is only updated when the last XMLHttpRequest callback is executed.
     I’m quite new to AJAX and JavaScript. Is there some fundamental problem in the way I’m doing it.
173. Evgeni May 17 2009 / 2pm

     The problem is solved! I’ve just analyzed the implementation in Fernando’s post above and did the same.
174. Mike May 20 2009 / 10pm

     As soon as I add a link to this script at the top of my page, it causes another jQuery plugin called EasyWidgets to function really strangely. As a note, this plugin requires jQuery UI so that could be part of the problem too.

     (http://www.bitacora.davidesperalta.com/archives/projects/easywidgets/)

     Any advice on how to remedy this?
175. Mike May 20 2009 / 10pm

     Sorry – you can ignore the above. When I moved the reference to the Prototype library BEFORE the jQuery reference, the problem fixed itself. I’m a bit new at this – I didn’t know what prototype was haha. Thanks!
176. Mike May 20 2009 / 11pm

     This also helped for others with my above problem!

     http://docs.jquery.com/Using_jQuery_with_Other_Libraries
177. Richard Jun 14 2009 / 12pm

     Hello,

     I have unsuccesfully tried to render the progress bar vertically. At least the background image animation is not working. Could you please help me in to right direction?
     Thank you!
178. Henze Jun 16 2009 / 3pm

     When loading 40 or more of those custom progressbars with animation IE8 is animating them to slow while FireFox 3.0.11 is handling them correctly. After …possibly the way IE handles javascript, but maybe there is a fix possible? why 40: i have to show the progress of 45 competences for school
179. Christian Jun 24 2009 / 7pm

     Hi,
     Could you please give me a hint how to have the progessbar vertical instead of horizontal?
     I try to script the load of my computers (Memory, Disk, Load, Latency).
     Glad to share my findings..

     Regards,
     Christian
180. Ruishi Jul 06 2009 / 8pm

     Thanks for sharing this!
181. Celso Jul 10 2009 / 4pm

     How reload every progressBar after a ajax request?
     Thanks, Celso
182. Daniel Jul 14 2009 / 1am

     I have a problem with the progress bar. It works fine and I am able to chage it with a button click. However I am atempting to increment the counter with a javascript but i am not able to do it e.g. do the following (scrip tag is wrong due to blog limitations.

     script type=”text/javascript”
     myJsProgressBarHandler.setPercentage(’myElementId’,’80?) /script

     After the progress bar has been created I could dynamically change it from javascript script tag. Thanks in advance.
183. Fabio Jul 25 2009 / 12am

     Hi Love It !!!!!

     Could i ask is there a way to show the % text with 2 decimal places?

     Seems like it rounds off
184. Bob Wood Jul 31 2009 / 8am

     Hello, I am building a video sharing site in ASP.NETand although I like the look of progress bar I am baffled as to how I could hook it up to the upload of videos. So far, after many hours of trying, I have not found a working solution. I am using SoThink for Windows video uploader and .flv encoder engine but sadly the upload bit does not yet incorporate a progress bar… Any help, however small appreciated.
185. mark Aug 27 2009 / 1pm

     Very nice script.
     I miss one feature, though: the ability to use it as ‘progress unknown progressbar’ (progressbar which doesn’t actually show the progress, but just shows something moving).
     I think this would be a very useful feature. Tell me what you think.
186. damon Sep 17 2009 / 3pm

     Hello!
     How use this cool script whis DB (MySQL)?
     I need insert getPercentage() to db.

     Thanks!!!
187. Yaser Sep 22 2009 / 2pm

     Hi, great progress bar….. works perfect….

     just an addition if you need the progress bar to change to a specific colour only at 100% (in my case red) here are the changes:

     in bramus/jsProgressBarHandler.js function:

     _setBgPosition : function(percentage)

     change var newBackIndex to

     var newBackIndex = Math.floor((percentage-1) / (100/(this.options.barImage.length-1)));

     and add after that :
     if (percentage == 100){
     var newBackIndex = this.options.barImage.length-1;
     }

     so the way it works is it will cause the last image in your list of images for the progress bar to only show at 100 percent other than that whatever other images you use will work as it did before e.g. if i was using the example code where there are 4 images first one is a green bar, second yellow, thrid orange and fourth red, this new code will cause green to load until 33%, yellow until 66% and orange until 99% and red at 100%.
188. Roland Sep 23 2009 / 11am

     Great script… hope I get i working

     Well, actually, it works perfectly well when I load the page.

     However, if I thereafter try to change the innerHTML value (the percentage) via a JavaScript, the bar disappears and I will only see the percentage (in text) counting up.

     Any ideas?
189. Roland Sep 23 2009 / 2pm

     OK, solved… Note to myself… “Don’t use innerHTML to change the percentage. Use the SetPercentage”.

     Anyway, if I have Animation=true, the bar goes crazy, counting down all the time (one time it was at -19000). If I put Animation=False, there is no problem though.
190. casparog Oct 08 2009 / 10am

     Help!
     I need to apply this nicely done progress bar to my “code behind” … i tried this one…
     Dim I
     For I = 1 To 20
     System.Threading.Thread.Sleep(1000)
     Response.Write(“”)
     Response.Write(“myJsProgressBarHandler.setPercentage(‘element4′,’+” & I & “‘);”)
     Response.Write(“return false;”)
     Response.Write(“”)
     Next

     but my progressbar aint movin at all…

     thanks! in advance! ^______________^.
191. Bruno Oct 23 2009 / 10am

     Hey, first of all great work.
     I would like to ask if it´s possible to use this to incorporate a program for commercial use.

     I ask this because I was not clear after reading the license.
192. Doug Oct 29 2009 / 6pm

     Hey Bramus, can this be used for donations? maeaning instead of showing percentage, we show a dollar amount, progressing towards a final dollar amount or goal?

     Thanks,
     Doug
193. Jeroen Kops Nov 16 2009 / 7pm

     Verry nice progress bar script. Though it would be nice to have a feature to set the time, and in stead of showing the percentage , showing the time left.
194. nick Nov 20 2009 / 6pm

     I’m showing the progress of converting files and using ajax to hit my db for the current percent. this bar would GREAT for this project. however, i’m running into an issue when trying to dynamically add more progress bars to the page AFTER laod (say if another file is now being converted). I get all sorts of null errors and the bar never shows. Any ideas?

     –error:
     Microsoft JScript runtime error: ‘this.pbArray[...]‘ is null or not an object

     –javascript:

     var tbody = document.getElementById(“tbl”).getElementsByTagName(“TBODY”)[0];
     var row = document.createElement(“TR”);
     var td2 = document.createElement(“TD”);

     var elmPgBar = document.createElement(“span”);
     elmPgBar.id = “pgBar” + id;
     elmPgBar.innerHTML = “0%”;
     elmPgBar.className = “progressBar”;

     td2.appendChild(elmPgBar);
     row.appendChild(td2);
     tbody.appendChild(row);
195. Carlito Dec 05 2009 / 4pm

     Hi Bramus,

     Very nice script you have there! Unfortunatly I’m not the best with javascript and completly new to AJAX. I linked the bar with a keyCheck method, so if I press spacebar, the bar begins to load (animated) to 100%. I want that if I press spacebar again, the bar is setted to 0% unanimated and then goes to 100% again animated.

     Is there a way to just ‘reset’ the bar without animations? I came up with something like:

     this.options.animate = false myJsProgressBarHandler.setPercentage(‘element1′,’0′);
     this.options.animate = true myJsProgressBarHandler.setPercentage(‘element1′,’100′);return false;

     But didn’t work (bar didn’t show percentage at all). I even tried to write a new setAnimate(animation) function by changing the defaultOptions var, but that didn’t work. Can you help me?

     Thanks in advance!
196. wc Jan 08 2010 / 10am

     Hi,

     firstly, thanks for developing such a wonderful progress bar!!
     But i have a question on it.
     I would like to know how to store the ‘latest value’ that i changed after i reloaded the page?
     Because now i can change the value, but after reload the value resume to the default one.
     Any suggestion?
197. EMoreth Jan 12 2010 / 11pm

     Hi, I just downloaded your class to use, and I realized that it can only work with elements which have IDs, since it is not a universal truth that all elements need IDs, I changed the code so it can work even with non identifyable elements. It does not use, id, or className on the elements, just a DOM reference.

     Since that would be very bad to put all the code here, i posted it on pastebin under link http://pastebin.com/f66fdd9d8.

     I also changed the datamembers to not being static, once that would crash the container element reference.
     Actually there is no real need of doing that (the only difference is a very tiny speed improvement if you were going to work with lots progress bars).

     Regards.
     EMoreth
198. Zsolt Borso Jan 20 2010 / 1pm

     Hi! I have tried jsProgressBar and doesnt work properly. I put the progress bar into a jspx page, with apache-trinidad controls. The frame png is visible, the text showing the percent value is updated, but the bar is not visible at all. What can be the problem? Thanks in advance: Zsolt
199. Cory Jan 22 2010 / 2am

     For anyone with the “‘this.pbArray[...]‘ is null or not an object” error that prevents the progress bar from loading: You can solve this by moving the that includes jsProgressBarHandler.js closer to the progress bar . This is because the dom:loaded event fires before the progress bar if the include is too far away.

Have your say

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>