JavaScript DHTML/Development/ProgressBar
Javascript progress bar
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>getExpression(), setExpression(), and recalc() Methods</TITLE>
<STYLE TYPE="text/css">
TH {text-align:right}
SPAN {vertical-align:bottom}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var now = new Date()
var shortWidth = 5
var multiple = 2.5
function init() {
with (document.all) {
hoursBlock.style.setExpression("width",
"now.getHours() * shortWidth * multiple","jscript")
hoursLabel.setExpression("innerHTML",
"now.getHours()","jscript")
minutesBlock.style.setExpression("width",
"now.getMinutes() * shortWidth","jscript")
minutesLabel.setExpression("innerHTML",
"now.getMinutes()","jscript")
secondsBlock.style.setExpression("width",
"now.getSeconds() * shortWidth","jscript")
secondsLabel.setExpression("innerHTML",
"now.getSeconds()","jscript")
}
updateClock()
}
function updateClock() {
now = new Date()
document.recalc()
setTimeout("updateClock()",1000)
}
function showExpr() {
alert("Expression for the \"Hours\" innerHTML property is:\r\n" +
document.all.hoursLabel.getExpression("innerHTML") + ".")
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>getExpression(), setExpression(), recalc() Methods</H1>
<HR>
<P>This clock uses Dynamic Properties to calculate bar width and time
numbers:</P>
<TABLE BORDER=0>
<TR>
<TH>Hours:</TH>
<TD><SPAN ID="hoursBlock" STYLE="background-color:red"></SPAN>
<SPAN ID="hoursLabel"></SPAN></TD>
</TR>
<TR>
<TH>Minutes:</TH>
<TD><SPAN ID="minutesBlock" STYLE="background-color:yellow"></SPAN>
<SPAN ID="minutesLabel"></SPAN></TD>
</TR>
<TR>
<TH>Seconds:</TH>
<TD><SPAN ID="secondsBlock" STYLE="background-color:green"></SPAN>
<SPAN ID="secondsLabel"></SPAN></TD>
</TR>
</TABLE>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="Show "Hours" number innerHTML Expression"
onClick="showExpr()"
</FORM>
</BODY>
</HTML>
Progress Bar 1
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 15.10</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
<style>
<style type="text/css">
#progressBar {position:absolute;
width:400px;
height:35px;
visibility:hidden;
background-color:#99ccff;
padding:20px;
border-width:2px;
border-left-color:#9999ff;
border-top-color:#9999ff;
border-right-color:#666666;
border-bottom-color:#666666;
border-style:solid;
}
#progressBarMsg {position:absolute;
left:10px;
top:10px;
font:18px Verdana, Helvetica, sans-serif bold
}
#sliderWrapper {position:absolute;
left:10px;
top:40px;
width:417px;
height:15px;
background-color:#ffffff;
border:1px solid #000000;
text-align:center;
font-size:12px
}
#slider{position:absolute;
left:0px;
top:0px;
width:420px;
height:15px;
clip:rect(0px 0px 15px 0px);
background-color:#666699;
text-align:center;
color:#ffffff;
font-size:12px
}
</style>
<script type="text/javascript">
/* ***********************************************************
Example 4-3 (DHTMLAPI.js)
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 1-56592-494-0
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ */
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.ru).
// Release 2.0. Supports NN4, IE, and W3C DOMs.
// Global variables
var isCSS, isW3C, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
}
}
// Set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
}
// Set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element"s clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element"s clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
}
</script>
<script type="text/javascript">
// Center a positionable element whose name is passed as
// a parameter in the current window/frame, and show it
function centerOnWindow(elemID) {
// "obj" is the positionable object
var obj = getRawObject(elemID);
// window scroll factors
var scrollX = 0, scrollY = 0;
if (document.body && typeof document.body.scrollTop != "undefined") {
scrollX += document.body.scrollLeft;
scrollY += document.body.scrollTop;
if (document.body.parentNode &&
typeof document.body.parentNode.scrollTop != "undefined") {
scrollX += document.body.parentNode.scrollLeft;
scrollY += document.body.parentNode.scrollTop
}
} else if (typeof window.pageXOffset != "undefined") {
scrollX += window.pageXOffset;
scrollY += window.pageYOffset;
}
var x = Math.round((getInsideWindowWidth()/2) - (getObjectWidth(obj)/2)) + scrollX;
var y = Math.round((getInsideWindowHeight()/2) - (getObjectHeight(obj)/2)) + scrollY;
shiftTo(obj, x, y);
show(obj);
}
function initProgressBar() {
// create quirks object whose default (CSS-compatible) values
// are zero; pertinent values for quirks mode filled in later
if (navigator.appName == "Microsoft Internet Explorer" &&
navigator.userAgent.indexOf("Win") != -1 &&
(typeof document.rupatMode == "undefined" ||
document.rupatMode == "BackCompat")) {
document.getElementById("progressBar").style.height = "81px";
document.getElementById("progressBar").style.width = "444px";
document.getElementById("sliderWrapper").style.fontSize = "xx-small";
document.getElementById("slider").style.fontSize = "xx-small";
document.getElementById("slider").style.height = "13px";
document.getElementById("slider").style.width = "415px";
}
}
function showProgressBar() {
centerOnWindow("progressBar");
}
function calcProgress(current, total) {
if (current <= total) {
var factor = current/total;
var pct = Math.ceil(factor * 100);
document.getElementById("sliderWrapper").firstChild.nodeValue = pct + "%";
document.getElementById("slider").firstChild.nodeValue = pct + "%";
document.getElementById("slider").style.clip = "rect(0px " + parseInt(factor * 417) + "px 16px 0px)";
}
}
function hideProgressBar() {
hide("progressBar");
calcProgress(0, 0);
}
// Test bench to see progress bar in action at random intervals
var loopObject = {start:0, end:10, current:0, interval:null};
function runit() {
if (loopObject.current <= loopObject.end) {
calcProgress(loopObject.current, loopObject.end);
loopObject.current += Math.random();
loopObject.interval = setTimeout("runit()", 700);
} else {
calcProgress(loopObject.end, loopObject.end);
loopObject.current = 0;
loopObject.interval = null;
setTimeout("hideProgressBar()", 500);
}
}
function test() {
showProgressBar();
runit();
}
</script>
</head>
<body onload="initDHTMLAPI(); initProgressBar()">
<h1>Progress Bar</h1>
<hr />
<button onclick="location.reload()">Reset</button>
<button onclick="test()">Run Loop</button>
<div id="progressBar">
<div id="progressBarMsg">Calculating...</div>
<div id="sliderWrapper">0%
<div id="slider">0%</div>
</div>
</div>
</body>
</html>