Dynamic Progress Bar

[IrDewey]

HTML:

<form name=f>
<input name="t">
<input type=button value="Deplete" onclick="deplete(document.f.t.value)">
<input type=button value="Restore" onclick="restore(document.f.t.value)">
</form>
<div style="width: 250; height:15; border: solid; background-color: darkred">
<span id="s"></span>
</div>
<div style="width: 250; height: 15; margin-top:-20">
<span id="a"></span>
</div>


Javascript:

document.getElementById("s").innerHTML = '<div style="background-color:red;height:15;width:0;"></div>'
document.getElementById("a").innerHTML = '<center><b>0</b></center>'

var value = 0 //Displayed value, used in animate() as an "after" value
var v = 0 //Used in animate() as a "before" value

function deplete(x){
v = value
if(x >= 0){
value -= x
if(value < 0){
value = 0
}
}else{
alert("Number must be greater than zero")
return
}
return animate()
}

function restore(x){
var v = value
if(x >= 0){
value -= -x
if(value > 100){
value = 100
}
}else{
alert("Number must be greater than zero")
return
}
return animate()
}

function animate(){
if(v == value){
return
}else{
if(v < value){
v -= -1
}
if(v > value){
v -= 1
}
l = v * 2.5
document.getElementById("s").innerHTML = '<div style="background-color:red;height:15;width:'
+ l
+ ';">'
+ '</div>'
document.getElementById("a").innerHTML = '<center>'
+ '<b>'
+ v
+ '</b>'
+ '</center>'
}
setTimeout("animate()",50)
}


Script which displays a bar, indicating a given value. The way I scripted it, 100% means a 250px bar, however you could easily change that to be whatever you want...

The HTML displays a text box followed by "Deplete" and "Restore" buttons. The deplete(x) and restore(x) functions add or subtract from the current value to get a new value, then goes to the animate() function to change the length of the bar.

This script can be adapted for many different uses, use your imagination.

HTML displays correctly in Firefox, and Opera, but not in IE (Just DIV issues, nothing major).

Enjoy :)

[IrDewey]

Made it more user-friendly, and it now works in all browsers.

Now it's a heck of a lot more efficient, more user-friendly, and more or less fool proof. Just one span tag, and the script does the rest!


/*
File:
Progress.js

By:
IrDewey (CodingForums.com)

Last Modified:
8/01/08

Changes:
Efficiency, user-friendliness

Purpose:
Animated value bar.

Usage:
Set "backColor", "color", "font", "start". "full", and "width" values, call deplete(x), and restore(x) as needed. Both functions will accept negative numbers.

Required in main file:
HTML:
<span id="barArea"></span>

Javascript (optional, include any, all, or none. Must be placed before this file is loaded.):
var backColor = "darkblue" //Background color, default = darkblue
var color = "blue" //Bar color, default = blue
var font = "black" //Font color, default = black
var start = 0 //Starting value, default = 0
var full = 100 //"Full" Value, default = 100
var width = 250 //Full width of the bar, default = 250

Reserved names:
Element ID's:
oD, dD, bD
Variables:
backColor*, color*, font*, start*, full, width, v, value, OuterDIV, displayDIV, barDIV
* = Nonessential past first execution
Functions:
deplete, restore, animate
*/

if(document.getElementById("barArea") != null){
if(backColor == null){
var backColor = "darkblue"
}
if(color == null){
var color = "blue"
}
if(font == null){
var font = "black"
}
if(start == null){
var start = 0
}
if(full == null){
var full = 100
}
if(width == null){
var width = 250
}
document.getElementById("barArea").innerHTML =
'<div id="oD" style="width: 250; height: 15; border: solid;">'
+ '<div id="bD" style="background-color:'
+ color
+ ';height:15;width:'
+ start * (width / full)
+ ';"></div>'
+ '</div>'
+ '<div id="dD" style="width: 250; height: 15; margin-top:-20; font-weight: bold; color: '
+ font
+ '; text-align: center;">'
+ start
+ '</div>'
var outerDIV = document.getElementById("oD")
var displayDIV = document.getElementById("dD")
var barDIV = document.getElementById("bD")
var value = start
var v = start
outerDIV.style.backgroundColor = backColor
if(navigator.appName != "Microsoft Internet Explorer"){
outerDIV.style.width = width
displayDIV.style.width = width + 4
}else{
outerDIV.style.width = width + 8
displayDIV.style.width = width + 8
displayDIV.style.marginTop = -23
}
}else{
alert('Object "barArea" not found!');
}

function deplete(x){
v = value
if(x < 0){
x = -x
return restore(x)
}
value -= x
if(value < 0){
value = 0
}
return animate()
}

function restore(x){
v = value
if(x < 0){
x = -x
return deplete(x)
}
value -= -x
if(value > full){
value = full
}
return animate()
}

function animate(){
if(v == value){
return
}else{
if(v < value){
v -= -1
}
if(v > value){
v -= 1
}
l = v * (width / full)
barDIV.style.width = l
displayDIV.innerText = v
}
setTimeout("animate()",25)
}

[macwiz]

Can't JQuery already do a lot of this?

[IrDewey]

Can't JQuery already do a lot of this?

I have no idea, I don't use jquery.