|
Javascript Progressbar class |
|
|
|
|
Written by Administrator
|
|
Saturday, 27 October 2007 |
This is a basic object oriented progressbar written in javascript. Part of the script is a randomized increment which allows you to see how it looks. To see a possible implementation of the script click here . Also you can check out the mechanics of the script here.
Javascript Code:
/*******************************************************************************************************************************
************************************************************************************************************************
Progress bar object functions
*************************************************************************************************************************
*************************************************************************************************************************/
var globalBarCollection = new Array()
var globalBarCount = 0
function progressbar(prefix){
this.globalID = globalBarCount
this.ledImage = "led.gif"
this.prefix = prefix
this.pgID = 0
this.spg = 0
this.progresstimer = false
this.interval = 0
this.lightbg = 'orange'
this.darkbg = 'eeeeee'
globalBarCollection[this.globalID] = this
globalBarCount++
}
//setup table for displaying progress
progressbar.prototype.place = function() {
with(document){
writeln('<table class="pbar" id='+this.prefix+' bgcolor="ffffff" cellspacing=1 cellpadding=0><tr>')
for(i=0;i<100;i++){
writeln('<td width=5 id='+this.prefix+i+'></td>')
}
writeln('</tr></table>')
}
}
//repeat coloring of cells until 100%
progressbar.prototype.play = function(){
this.spg = this.pgID
// step(this)
// this.interval = GetRandom(200,1000) //generate random time for timeout
//if(!this.myPrototypeCall){
// var myInst = globalBarCollection[this.globalID]
// this.myPrototypeCall = function() { myInst.play()}
// this.progresstimer = window.setInterval (this.myPrototypeCall, interval);
// }
//cause of issues with running timeout from within prototype this is an attempt to use utility function to substitute
//step(this)
doProtoTypeInterval(this.globalID)
}
progressbar.prototype.pause = function(){
clearTimeout(this.progresstimer)
}
progressbar.prototype.reset = function(){
this.pause()
clearRange(this.pgID,this.prefix)
this.pgID = 0
this.spg = 0
}
/*******************************************************************************************************************************
************************************************************************************************************************
Progress bar utility functions
*************************************************************************************************************************
*************************************************************************************************************************/
//setTimeout workaround
function doProtoTypeInterval(objID){
// step(globalBarCollection[objID])
currentobj = globalBarCollection[objID]
distance = GetRandom(0,6) //generate random increment for range of cells
if((currentobj.pgID + distance) >= 99){
currentobj.pgID = 100
}
else { currentobj.pgID+=distance }
bgfill(currentobj.spg,currentobj.pgID,currentobj.prefix)
currentobj.interval = GetRandom(200,1000) //generate random time for timeout
currentobj.progresstimer = window.setTimeout("doProtoTypeInterval("+objID+")",currentobj.interval)
}
//execute coloring of range of cells
//to review function because there was no success in calling setTimeout from prototyped function play()
//key utility function to fill range of cells
//obsolete! functionality placed in doProtoTypeInterval
function step(myobject){
distance = GetRandom(0,6) //generate random increment for range of cells
if((myobject.pgID + distance) >= 99){
myobject.pgID = 100
}
else { myobject.pgID+=distance }
bgfill(myobject.spg,myobject.pgID,myobject.prefix)
}
//utility function used by object during incrumenting
function GetRandom(start,end){
var range = end - start + 1;
var result = start + Math.floor(Math.random()*range);
return result;
}
//utility function used to color range of cell
//not sure why but pointers to cell objects not changing.
//Use bgfill instead.
function fill(firstPG,lastPG,prefix){
for(x=firstPG;x<lastPG;x++){
pgsetp = prefix + x
pgsetp = document.getElementById(pgsetp)
pglight = document.createElement('IMG');
pglight.src= "led.gif"
pglight.setAttribute('width','5');
pglight.setAttribute('height','5');
//pgsetp.removeChild(pgsetp.childNodes[0]);
pgsetp.appendChild(pglight);
}
}
function bgfill(firstPG, lastPG, prefix){
for(x=firstPG;x<lastPG;x++){
pgsetp = prefix + x
pgsetp = document.getElementById(pgsetp)
pgsetp.style.background = 'gray'
}
}
function clearRange(lastPG,prefix){
for(x=0;x<lastPG;x++){
pgsetp = prefix + x
//alert(pgsetp)
pgsetp = document.getElementById(pgsetp)
pgsetp.style.background = 'white'
}
}
 Add to favourite articles (91) |  Place this article on your website | Views: 300
Only registered users can write comments.
Please login or register. blabh
|
|
Last Updated ( Saturday, 20 February 2010 )
|
