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.

0%

Creation

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>

Updating

By loaded text

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>

By loaded images

All images expose the property readyState. Once the images is fully loaded the readeState becomes complete. Every change in readyState 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 image.

Other elements

Basically all element that loads an external file has the readyState attribute. 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.

Finishing

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)")

Getting file size

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.

Final Words

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...

Author: Erik Arvidsson