 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  37880  acoder 16,027
Recognized Expert Moderator MVP
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 :)
acoder 16,027
Recognized Expert Moderator MVP Background color fix: #000000
and thats all i presume. Please check for compatibility.. .
Fixed. I'll check it later.
acoder 16,027
Recognized Expert Moderator MVP
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.
acoder 16,027
Recognized Expert Moderator MVP
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.
acoder 16,027
Recognized Expert Moderator MVP
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.
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 image. This is because
the picture hasn't loaded yet. How can I have it so that it waits till
the image is loaded before changing the height width and...
|
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 to wait for the external resource to
load to show up the page,
thus giving a perceiving faster load time for the user.
|
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 how to do this.
Help?
|
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:
1. document.write("<script src=
language='JavaScript'></script>);
2. sc = document.createElement("<script>"); sc.setAttribute("src",
); and...
|
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 and script.aculo.us.
http://jear.sourceforge.net
Thanks for your attention.
| | |
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 and populates into the webpage; however, executing javascript has a few problems:
1. Opens on a blank page, but not a new page. It appears to...
|
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; Panjim" distt="madgaon"/>
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
