Status bars are really easy to do in DHTML. The creation of your own status bar is easy and the update of the value is easy as well. There is only one real problem: Coordinating the status bar so it represent some logical status.
The only thing that is needed for a statusbar is some element that can be changed in a logical way to represent the progress. The easiest is a HR or a DIV with a background color. I choose to do a little more complex structure using nested DIVs to have a gradient fill of the status. I also added another DIV that shows the numerical percentage value. Below a show the most simple and my version of a status bar.
<!-- Simple Status Bar --> <hr id="simpleStatBar" style="width: 10%;"> <!-- My Status Bar --> <div id="sb" style="border: 2 inset white; width: 200px; height: 20px; background: white; text-align: left;"> <div style="position: absolute; width: 0%; height: 16px; filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);"> <div style="width: 100%; height: 100%; background: highlight; font-size: 1;"></div> </div> <div style="position: absolute; width: 100%; text-align: center; font-family: arial; font-size: 12px;"> 0%</div> </div>
This is maybe the easiest way to update the statusbar. In the html file you add SCRIPT tags at even intervals that updates the status bar.
<!-- Simple Version --> <script>simpleStatBar.style.width = "20%"</script> <!-- My version --> <script>setSB(20,sb)</script>
All images expose the property
readyState. Once the images is fully loaded the
readeState becomes complete. Every change in
fires the event
onreadystatechange but this event doesn't bubble so you'll have to
catch the event on the object. There are basically two solutions to this. The first is just to check
all images using
document.images at an even interval or you could add the event
handlers to all images once. You could also add an array with information about the size of each
Basically all element that loads an external file has the
These are the elements that expose it: IMG, LINK, OBJECT, SCRIPT, STYLE and the document element.
You can also try this property on other frames by checking the document inside the frmae.
The status bar should (probably) say 100% when the page has finished loaded. This can be acheived by setting the status bar to 100% when window.onload fires.
window.onload = new Function("setSB(100,sb)")
I don't know any way to find the file size using client side scripts but using server side script (such as ASP, SSI, PHP) you could insert the file size inside the html as a string that can then be accessed by the client sides script.
Status bar are nice but there isn't any really an easy way to create a general method. You always need to add some (but easy) code to your html...