JavaScript Loading Mask
Requirements: Little knowledge in JavaScript and some HTML. JavaScript enabled browser.
Applications: Useful for all those pages that load slow, and in sections, so instead of watching the page load in sections.
Put this in your <head>:
[code=javascript]<script type="text/javascript">
function overlay() {
elem = document.getEle mentById("overl ay");
elem.style.visi bility="hidden" ;
elem = document.getEle mentById("bodyd iv");
elem.style.visi bility="visible ";
}
</script>[/code]
Make your <body> tag look like this:
[code=html]<body onLoad="overlay ()">[/code]
Inside your <body>, at the top of everything, put this:
[code=html]<div id="overlay" style="width:10 0%; height:100%; position: absolute; background-color:#000000;" >
<table><tr><t d valign="center" height="100%" width="100%">
<div align="center" style="border: 1px solid black; background-color:#ffffff; width:50%;">
<h3>Loading.. . Please Wait.</h3>
</div>
</td></tr></table>
</div>
<div id="bodydiv" style="visibili ty:hidden;">
... (your current page body) ...<br />
... (Which should be long..) ...<br />
... (because it has to load) ...<br />
... (so yeah.. this is body) ...
</div>[/code]
So all together you get:
[code=html]<html>
<head>
<title>Loadin g Screen</title>
<script type="text/javascript">
function overlay() {
elem = document.getEle mentById("overl ay");
elem.style.visi bility="hidden" ;
elem = document.getEle mentById("bodyd iv");
elem.style.visi bility="visible ";
}
</script>
</head>
<body onLoad="overlay ()">
<div id="overlay" style="width:10 0%; height:100%; position: absolute; background-color:#000000;" >
<table><tr><t d valign="center" height="100%" width="100%">
<div align="center" style="border: 1px solid black; background-color:#ffffff; width:50%;">
<h3>Loading.. . Please Wait.</h3>
</div>
</td></tr></table>
</div>
<div id="bodydiv" style="visibili ty:hidden;">
... (your current page body) ...<br />
... (Which should be long..) ...<br />
... (because it has to load) ...<br />
... (so yeah.. this is body) ...
</div>
</body>
</html>[/code]
And you have a pleasant loading message. You may edit the content (div styles, etc.) but the JavaScript must remain as is, unless you know what you are doing. This is really a simple script, but it is there for those that want it.
Sincerely,
Eragon
Comment