Automatic Creation of Progress Bars

Include the needed javascript  in your HTML document

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

          <!-- jsProgressBarHandler core -->
       
          <script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>

The elements you want to change with a dynamic progressBar must be scripted as this:

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

1. • Yes, it must be a span element
   • progressBar is the className that will trigger jsProgressBarHandler to change it with a progress bar
   • 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)
2. You might want to edit the first few lines (#28-35) of js/bramus/jsProgressBarHandler.js to change some settings like width, height, animation and the images to use
3. That's it, you're done!

Manual Creation of Progress Bars

Include the needed javascript (2 files) in your HTML document

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

Create a container (viz. a regular HTML element like a paragraph or a span) in your HTML file to hold the progressbar. Make sure it has an id set.

      <div class="percentImage1" id="hereComesMyFirstProgressBar">[ Loading Progress Bar ]</div>

1. If you're using the default markup used (with span elements which has progressBar as className), then edit js/bramus/jsProgressBarHandler.js and set the var autoHook to false (line #25)

2. Create a new JS_BRAMUS.jsProgressBar instance by adding this javascript to your HTML page (the code will be executed when the DOM is done loading):

      Event.observe(window, 'load', function() {
       firstManualPB = new JS_BRAMUS.jsProgressBar($('hereComesMyFirstProgressBar'), 50, {animate: false, width: 240, height: 24});
          secondManualPB = new JS_BRAMUS.jsProgressBar($('hereComesMySecondProgressBar'), 10, {animate: true, showText: false});
    }, false);

1. • The first param is the element to create the progressbar in
   • The second param is the (intial) percentage the progressbar should hold
   • The third param is optional and holds a specific configuration for that instance. Parts of this object can be omitted (and parts of the default options will be used instead), or the param can even be dropped (the full default options will be used)
2. You might want to edit the first few lines (#28-35) of lib/jsProgressBarHandler.js to change the default settings for width, height, animation and the images to use

That's it, you're done!