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>: - <script type="text/javascript">
-
function overlay() {
-
elem = document.getElementById("overlay");
-
elem.style.visibility="hidden";
-
elem = document.getElementById("bodydiv");
-
elem.style.visibility="visible";
-
}
-
</script>
Make your <body> tag look like this: - <body onLoad="overlay()">
Inside your <body>, at the top of everything, put this: - <div id="overlay" style="width:100%; height:100%; position: absolute; background-color:#000000;">
-
<table><tr><td 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="visibility:hidden;">
-
... (your current page body) ...<br />
-
... (Which should be long..) ...<br />
-
... (because it has to load) ...<br />
-
... (so yeah.. this is body) ...
-
</div>
So all together you get: - <html>
-
<head>
-
<title>Loading Screen</title>
-
<script type="text/javascript">
-
function overlay() {
-
elem = document.getElementById("overlay");
-
elem.style.visibility="hidden";
-
elem = document.getElementById("bodydiv");
-
elem.style.visibility="visible";
-
}
-
</script>
-
</head>
-
<body onLoad="overlay()">
-
-
<div id="overlay" style="width:100%; height:100%; position: absolute; background-color:#000000;">
-
<table><tr><td 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="visibility: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>
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
13 37835
Are you sure you've got the background color correct - o or 0?
Remember, Java != JavaScript.
Otherwise, I'm sure people will find this useful.
Background color fix: #000000
and thats all i presume. Please check for compatibility...
thank you :)
Background color fix: #000000
and thats all i presume. Please check for compatibility...
Fixed. I'll check it later.
There was a mistake in the full version of the code in the body onload (line 13). You forgot the parentheses/brackets. I've added them for you.
This seems to work well, but you should consider changing the colors and font - black and white is a bit boring!
There was a mistake in the full version of the code in the body onload (line 13). You forgot the parentheses/brackets. I've added them for you.
This seems to work well, but you should consider changing the colors and font - black and white is a bit boring!
thanks. This code is user customizable. They can change the colors at will.
thanks. This code is user customizable. They can change the colors at will.
Of course, but rather than changing inline, it should be customizable through JavaScript since the overlay should not display if JavaScript is not enabled. In fact, you should consider a drop-in script which would involve the use of document.write after the body tag.
Of course, but rather than changing inline, it should be customizable through JavaScript since the overlay should not display if JavaScript is not enabled. In fact, you should consider a drop-in script which would involve the use of document.write after the body tag.
good idea.... ill change that and post another code. Because with this one, if the user doesn't have javascript, your just going to have an infinitely loading page.
ill post another version when i get done with a few things.
Hi, this does not seem to work in IE8, could anyone fix this?
LE: I added Adsense code during loading process and after the page is loaded adsense sticks out, does not disappear.
LE2: Adsense issue fixed :D
Now I only need to make it work in IE8.
What happens in IE8? Have you tried other versions of IE?
You may want to post in the forum instead of here to get a better response.
@acoder
In Mozilla, Safari and Chrome everything looks perfect but in IE(tried 6,7 and 8) the preloader is loading in the right of the page, not in the middle, maybe is because position:absolute, i don't know... can anyone help?
Ah right, that's more a CSS problem. Here's one way you could do it. You may also find this useful. Failing that, ask in the HTML/CSS forum.
Two years it took.
But alas, i have returned.
And by the way, i have a better code. - <html>
-
<head>
-
<title>Loading Screen</title>
-
<script type="text/javascript">
-
-
//Hide the body. See, if you have javascript, it would hide, otherwise, it's visible.
-
elem3 = document.getElementById("bodydiv");
-
elem3.style.visibility="hidden";
-
-
//Show the loading page. Same as above.
-
elem4 = document.getElementById("overlay");
-
elem4.style.visibility="visible";
-
-
function overlay() {
-
elem = document.getElementById("overlay");
-
elem.style.visibility="hidden";
-
elem2 = document.getElementById("bodydiv");
-
elem2.style.visibility="visible";
-
}
-
</script>
-
<style>
-
-
#overlay {
-
width: 100%;
-
height: 100%;
-
position: absolute;
-
visibility: hidden;
-
-
/*Background information for the preloading mask:*/
-
background-color:#000000;
-
-
/*Font color and options:*/
-
color:#CCCCCC;
-
font-family:Georgia, "Times New Roman", Times, serif;
-
font-size:16px;
-
}
-
-
</style>
-
</head>
-
<body onLoad="overlay()">
-
<div id="overlay">
-
<table><tr><td valign="center" height="100%" width="100%">
-
<div align="center">
-
Loading... Please Wait.<!--You can put pretty much whatever here.-->
-
</div>
-
</td></tr></table>
-
</div>
-
-
<div id="bodydiv" style="visibility:visible;">
-
-
<!-- YOUR BODY CONTENT WOULD GO HERE -->
-
-
</div>
-
</body>
-
</html>
That wouldn't work because on line 7, bodydiv wouldn't have been defined yet.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Robbie |
last post by:
I have a simple script that changes the src and height and width of a
<img>. But when I load the image it changes it size first, streching or
shrinking the previous image, before changing the...
|
by: joaopedrogoncalves |
last post by:
Hi,
I want to load an external javascript file, get its results and stick
them inside a <div> block. I also
want to do this in several places on a web page.
This way the browser doesn't have...
|
by: Martin |
last post by:
I need a Javascript function that can do a Bit Test on a numeric
value. IOW, given a numeric value (a 16 bit integer value) and a bit
number, tell me whether that bit is 1 or 0.
I have no idea...
|
by: Venkatesh |
last post by:
Hello All,
I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:...
|
by: mangust404 |
last post by:
Hi, i suppose this project could be helpfull to people who make a web-applications with a horde of javascript-includings.
This project is Prototypejs-based and it consists from prototype.js itself...
|
by: RMWChaos |
last post by:
Currently testing in: WinVista / IE7
I have been working on getting xmlhttprequest going for weeks now. I have finally gotten a semi-working script going. Pulling up text or xml files works great...
|
by: sandeep kumar shah |
last post by:
I am facing one problem on loading the xml file
The code is
1. XML file
//attribute.xml
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>sandeep</name>
<address state="Goa D;...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
| |