Hot!Ajax

jsProgressBarHandler is a Dynamic Unobtrusive Javascript Progress/Percentage Bar.

From:http://www.bram.us/projects/js_bramus/jsprogressbarhandler/

download:http://www.hotajax.org/download/otherjs/jsprogressbarhandler.zip

http://www.bram.us/projects/js_bramus/jsprogressbarhandler/

jsProgressBarHandler is a rewrite of the (unfortunately wrongly named) AJAX Progress / Percentage Bar by Webappers. Improvements made were the change from a set of functions to a true Prototype.js Class, reduction in the number of functions, and making it unobtrusive (if javascript is disabled you'll still see the percentage), amongst some minor tweaks.

jsProgressBarHandler has been tested and verified working in IE6, IE7, FireFox 2 and Safari 3.0.3. Other browsers should work fine too (untested though).

demo:

Installation/Configuration

1.Include the needed javascript (2 files) and needed CSS files in your HTML document

HTML:

<!-- jsProgressBarHandler prerequisites : prototype.js -->
 <script type="text/javascript" 
 src="/download/otherjs/jsProgressBarHandler/lib/prototype.js">
</script><!-- jsProgressBarHandler core -->
<script type="text/javascript"  src="/download/otherjs/jsProgressBarHandler/lib/jsProgressBarHandler.js"> 

</script>
<link rel="stylesheet" type="text/css"  href="/download/otherjs/jsProgressBarHandler/lib/jsProgressBarHandler.css"

 media="screen" />
2.The elements you want to change with a dynamic progressBar must be scripted as this:

<span class="progressBar colorClass" id="myElementId">15%</span>

• • Yes, it must be a span element
  • progressBar is the className that will trigger jsProgressBarHandler to change it with a progress bar
  • colorClass can either be percentImage1 (green), percentImage2 (yellow), percentImage3 (orange) or percentImage4 (red). Other classes are possible too, if you change the jsProgressBarHandler.css file to contain this class.
  • the id (myElementId in the example) must be unique (as per HTML specification) and is required for jsProgressBarHandler to work properly
  • the innerHTML of the element must be the percentage (either with or without the &proc; character)

3.That's it, you're done!

Comments (0)

Show/hide comments

Show/hide comment form