Entry

How can I script a progress bar?

Mar 1st, 2002 12:13
Ben Munoz, Martin Honnen,

The following sets up a ProgressBar object which works with NN4/NN6 and 
IE4/5. 
----------------------- ProgressBar.js ----------------------------
function ProgressBar (styles) {
  this.id = ProgressBar.cnt;
  ProgressBar.bars[ProgressBar.cnt++] = this;
  if (!styles)
    styles = {};
  var df = ProgressBar.defaults;
  for (var p in df) 
    this[p] = styles[p] ? styles[p] : df[p];
  this.writeHTML();
}
function ProgressBar_writeHTML () {
  this.layerID = 'Bar' + this.id;
  var html = '';
  if (document.all) {
    html += '<SPAN';
    html += ' ID="' + this.layerID + '"';
    html += ' STYLE="';
    if (this.position != 'none')
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + ';' 
        + ' top: ' + this.top + ';';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.backgroundColor + ';';
    html += ' border: ' + this.borderWidth + 'px solid' 
      + ' ' + this.borderColor + ';';
    html += '"';
    html += '>';
    html += '<DIV ID="P' + this.layerID + '"';
    html += ' STYLE="';
    html += ' position: absolute;';
    html += ' width: 100%; height: 100%;';
    html += ' background-color: ' + this.color + ';';
    html += ' clip: rect(0px, 0px, auto, 0px)';
    html += '"';
    html += '>';
    html += '<\/DIV>';
    html += '<\/SPAN>';
  }
  else if (document.layers) {
    this.fullWidth = this.width + 2 * this.borderWidth;
    this.fullHeight = this.height + 2 * this.borderWidth;
    html += '<STYLE>';
    html += '#' + this.layerID + ' {';
    if (this.position == 'none')
      html += ' position: relative;'
    else
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + 'px;' 
        + ' top: ' + this.top + 'px;';
    html += ' width: ' + (this.fullWidth) + 'px;';
    html += ' height: ' + (this.fullHeight) + 'px;';
    html += ' clip: rect(0 ' + this.fullWidth + ' '
      + this.fullHeight + ' 0);';
    html += ' layer-background-color: ' + this.backgroundColor + ';';
    html += '}';
    html += '#B' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' width: ' + this.fullWidth + 'px;';
    html += ' height: ' + this.fullHeight + 'px;';
    html += ' clip: rect(0, ' + this.fullWidth + ', '  + 
this.fullHeight + ', 0);';
    html += 'layer-background-color: ' + this.borderColor + ';';
    html += '}';
    html += '#I' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' left: ' + this.borderWidth + 'px;';
    html += ' top: ' + this.borderWidth + 'px;';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' clip: rect(0, ' + this.width + ', ' + this.height 
+ ', 0);';
    html += 'layer-background-color: ' + this.backgroundColor + ';';
    html += '}';
    html += '#P' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' left: ' + this.borderWidth + 'px;';
    html += ' top: ' + this.borderWidth + 'px;';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' clip: rect(0, 0, ' + this.height + ', 0);';
    html += 'layer-background-color: ' + this.color + ';';
    html += '}';
    html += '<\/STYLE>';
    html += '<SPAN ID="' + this.layerID + '">';
    html += '<DIV ID="B' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<DIV ID="I' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<DIV ID="P' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<\/SPAN>';
  }
  else if (document.getElementById) {
    html += '<DIV';
    html += ' ID="' + this.layerID + '"';
    html += ' STYLE="';
    if (this.position != 'none')
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + ';' 
        + ' top: ' + this.top + ';';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.backgroundColor + ';';
    html += ' border: ' + this.borderWidth + 'px solid' 
      + ' ' + this.borderColor + ';';
    html += '"';
    html += '>';
    html += '<DIV ID="P' + this.layerID + '"';
    html += ' STYLE="';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.color + ';';
    html += ' clip: rect(0px, ' + this.width + 'px, auto, 0px);';
    html += ' overflow: hidden;';
    html += '"';
    html += '>';
    html += '<\/DIV>';
    html += '<\/DIV>';
  }
  document.write(html);
}
ProgressBar.prototype.writeHTML = ProgressBar_writeHTML;
function ProgressBar_progressTo (percentage) {
  if (document.all) {
    if (!this.pbar)
      this.pbar = document.all['P' + this.layerID];
    this.pbar.style.clip =
      'rect(0px, ' 
      + Math.floor(percentage * this.width) + 'px,' 
      + ' auto, 0px)';
  }
  else if (document.getElementById) {
    if (!this.pbar)
      this.pbar = document.getElementById('P' + this.layerID);
    this.pbar.style.clip = 
      'rect(0px, '
      + Math.floor(this.width - percentage * this.width) + 'px'
      + ', auto, 0px)';
  }
  else if (document.layers) {
    if (!this.pbar)
      this.pbar = document[this.layerID].document['P' + this.layerID];
    this.pbar.clip.width = Math.round(percentage * this.width);
  }
}
function ProgressBar_hide () {
  if (document.layers)
    document[this.layerID].visibility = 'hide';
  else if (document.all)
    document.all[this.layerID].style.visibility = 'hidden';
  else if (document.getElementById)
    document.getElementById(this.layerID).style.visibility = 
      'hidden';
}
ProgressBar.prototype.hide = ProgressBar_hide;
ProgressBar.prototype.progressTo = ProgressBar_progressTo;
ProgressBar.defaults = {
  position: 'none',
  left: 0,
  top: 0,
  width: 200,
  height: 25,
  borderColor: 'black',
  borderWidth: 1,
  backgroundColor: 'blue',
  color: 'lime'
}
ProgressBar.cnt = 0;
ProgressBar.bars = new Array();
------------------------------------------------------------------
Example usage:
<HTML>
<HEAD>
<SCRIPT SRC="ProgressBar.js">
</SCRIPT>
<SCRIPT>
var pb;
var c = 0;
function progressDemo () {
  pb.progressTo (c);
  c += 0.1;
  if (c <= 1)
    setTimeout('progressDemo()', 200);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="progressDemo();">
Progress Bar Demo:
<SCRIPT>
pb = new ProgressBar ();
</SCRIPT>
<BR>
</BODY>
</HTML>
------------------------------------------------------------
ALTERNATE SOLUTION: Use Servlets, PHP, or ASP w/ javascript
------------------------------------------------------------
All of the dynamic web page solutions offer you the ability
to flush the buffer.  Use this with javascript to create a 100%
accurate progress indicator of server side activity.
How?
pseudo-code:
// your placeholder for status/progress
<div id='status'></div>
<script language='javascript'>
document.all('status').innerHTML='0% complete'
</script>
// flush your buffer here
// do some server side stuff
<script language='javascript'>
document.all('status').innerHTML='50% complete'
</script>
// flush your buffer here
// do some more server side stuff
<script language='javascript'>
document.all('status').innerHTML='100% complete'
</script>
// flush buffer 
// end page
//credit to Brett Law for this one