|
One source for storefront software, order processing utilities, credit card transactions
|
JUST FOR FUN
Click an arrow to visit the application.
ALL THE STUFF THAT'S RIGHT HANDED
PLAY OUR SLOT MACHINE, WIN NOTHING
GET RID OF THE DOUBLE CLICK SUBMIT
FIX THAT JAVASCRIPT NUMBER
KEEP TABS ON THE HEALTH OF YOUR COLDFUSION SERVER
CREATE A DYNAMIC BAR CHART
|
DYNAMIC BAR CHART
Everyone's probably familiar with the windows download "time remaining" pop
up screen, but did you know that you can have one that runs in a browser?
This is accomplished with a little style sheet code and some JavaScript. It
takes advantage of the DHTML properties of the DOM (Document Object Model)
available with 4.x+ browsers.
|
| | GIVE IT A TRY |
Click the "start" link to begin. Normally this event would be triggered by
something like a body onLoad event and some other event could be triggered
when the "complete" message appears.
|
| | HOW IT WORKS |
|
First, you may have noticed slight movement of the 'start' and 'complete' boxes
while the bar was extending. This is a browser anomaly when loading the table.
We don't know why.
The only style sheet code used is a <div id="load" class="ld"> declaration
around the word "complete" to keep the word hidden until triggered visible by the
extended position of the bar. The layout itself is simply a table with three data elements.
JavaScript is recursively executed inside a function growIMAGE(). The
function sets a variable called loadstyle according to which browser DOM
is supported. The function then checks if the bar is still less than the maximum
allowed width, maxw, and if yes, adds the grow amount to the
current width. The bar itself is identified by the name, barw when
writting to the image width attribute. As long as the bar is less than maxw,
the function is called again after a delay of recur milliseconds. If the
bar width exceeds maxw, the variable w is reset to zero, the word
"complete" is made visible, and the function quits recurring.
Naturally the width of the bar doesn't have to be dynamic. This same technique
can be used to create histograms in a document from, for instance, a database
query.
|
| | THE CODE |
<style type="text/css">
.ld{visibility: hidden;}
</style>
<script language="JavaScript1.1" type="text/javascript">
//<-- ==========================Hide SCRIPT=============================
var isNS = (navigator.appName == 'Netscape' && parseInt(navigator.appVersion)>=4);
barw = new Image(10,12);
var w = 0; //pixels
var maxw = 200; //pixels
var grow = 3; //pixels
var recur = 20; //miliseconds
function growIMAGE(){
var loadstyle = (isNS)?document.load: document.all.load.style;
if(w < maxw){
loadstyle.visibility = "hidden";
w = w + grow;
document.images.barw.width = w
setTimeout('growIMAGE()', recur);}
else{ w = 0; return false;}
if(w >= 200){loadstyle.visibility = "visible";
//setTimeout("document.location.href = 'iams-apply.cfm'", 2000);
}
}
//onError = null
//===============================The End============================= -->
</script>
The bar image itself is initially set to zero width:
<img name="barw" src="bar.gif" width=0 height=12 border=0 hspace=0 vspace=0>
If the code is too small to read with your screen resolution, copy and paste it
to a text editor for a better view.
|
Writing code is like wrestling alligators:
The more you thrash around, the more gators join the fray!
|
|
|
