Page Loading Message

[fmrock]

Hey everyone,

I am working on a project that is using a the BlackIce active x control to view TIFF images in the broswer. Now sometimes these tiff images are large and take a few seconds to load. I would like to display a "Image Loading..."
and part of the activex has a JS function that can tell when the image is download is complete, so I can turn off the display. I have looked around and didnt find much usefull... didnt know if any of you had any ideas.

Thanks

[Mr Moo]

Here's my idea:
1. Head here (http://www.ajaxload.info/) and make yourself a nice loading gif
2. Add <div id='loading'><img src='images/loading.gif' /></div> to your page
3. Add a style for #loading to your style sheet and style and position it nicely
4. Make sure #loading includes display: none;
5. When you start loading a tiff, run document.getElementById("loading").style.display = "block";
6. When you're done loading, run document.getElementById("loading").style.display = "none";

[fmrock]

It appears to be working, but not placing it where I want. its just down on the very bottom of the screen.

CSS


.loading {
width: 250px;
height: 150px;
background-color: #c0c0c0;
position: absolute;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -125px;
text-align: center;
border-style:solid;
border-width:thin;
border-color:#000000;
display:none;
}


Div code


<div id="loading"><br><img src="images/loading_bar.gif" alt="Page Loading....." width="220" height="19"><br><br>Loading.....<br><br>Please wait...</div>


Code placed in the existing onload


document.getElementById("loading").style.display = "block";


Code placed in the existing download complete function


document.getElementById("loading").style.display = "none";


Also, this is on a CSS layout with an active x control.

The div when its on the very bottom, does not have the border/background color that i specified.

[fmrock]

Found the layer.. it was hiding behind the activeX control.

I decided to hide that div and show my loading div. And when its done, turn to the one div and turn off the loading div.

Thanks for your help