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