StealthRT
12-31-2007, 05:16 AM
Hey all i am trying to get the following code to start BEFORE the page starts loading... and then use the onload="" to end the overlay.
heres the code:
<html>
<head>
<title>Overlay</title>
<style type="text/css">
body {
margin: 0px;
}
#overlay {
background-image: url(http://www.pixeldepth.net/EE/Overlay/overlay.png);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
<!--
var overlay = {
click_on_overlay_hide: false,
show_loading_image: true,
loading_image: "http://www.pixeldepth.net/EE/Overlay/loading.gif",
$: function(id){
return document.getElementById(id);
},
init: function(){
var ol_div = document.createElement("div");
ol_div.id = "overlay";
ol_div.style.display = "none";
ol_div.onclick = (this.click_on_overlay_hide)? overlay.hide : null;
if(this.show_loading_image){
var l_img = document.createElement("img");
l_img.src = this.loading_image;
l_img.style.position = "absolute";
l_img.style.top = (((window.innerHeight)? window.innerHeight : document.body.clientHeight) / 2) + "px";
l_img.style.left = (((window.innerWidth)? window.innerWidth : document.body.clientWidth) / 2) + "px";
ol_div.appendChild(l_img);
}
document.body.appendChild(ol_div);
},
show: function(){
if(this.$("overlay")){
this.$("overlay").style.display = "";
}
},
hide: function(){
if(overlay.$("overlay")){
overlay.$("overlay").style.display = "none";
}
}
}
//-->
</script>
<script>
</script>
</head>
<body onload="setTimeout('overlay.hide()', 5000)">
<input type="button" onclick="overlay.init();overlay.show(); setTimeout('overlay.hide()', 5000)" value=" Click " /><br /><Br />
blah lbah lbah<br>
balkjsd<br>
dfsa<br>
dfas<br>
</body>
</html>
The overlay.init(); and overlay.show(); are needed to start the overlay. However, i am unable to start those without having a button to push doing so... which would defeat the purpose of having a loading box....
Any help to solve this problem would be great!:thumbsup:
David
heres the code:
<html>
<head>
<title>Overlay</title>
<style type="text/css">
body {
margin: 0px;
}
#overlay {
background-image: url(http://www.pixeldepth.net/EE/Overlay/overlay.png);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
<!--
var overlay = {
click_on_overlay_hide: false,
show_loading_image: true,
loading_image: "http://www.pixeldepth.net/EE/Overlay/loading.gif",
$: function(id){
return document.getElementById(id);
},
init: function(){
var ol_div = document.createElement("div");
ol_div.id = "overlay";
ol_div.style.display = "none";
ol_div.onclick = (this.click_on_overlay_hide)? overlay.hide : null;
if(this.show_loading_image){
var l_img = document.createElement("img");
l_img.src = this.loading_image;
l_img.style.position = "absolute";
l_img.style.top = (((window.innerHeight)? window.innerHeight : document.body.clientHeight) / 2) + "px";
l_img.style.left = (((window.innerWidth)? window.innerWidth : document.body.clientWidth) / 2) + "px";
ol_div.appendChild(l_img);
}
document.body.appendChild(ol_div);
},
show: function(){
if(this.$("overlay")){
this.$("overlay").style.display = "";
}
},
hide: function(){
if(overlay.$("overlay")){
overlay.$("overlay").style.display = "none";
}
}
}
//-->
</script>
<script>
</script>
</head>
<body onload="setTimeout('overlay.hide()', 5000)">
<input type="button" onclick="overlay.init();overlay.show(); setTimeout('overlay.hide()', 5000)" value=" Click " /><br /><Br />
blah lbah lbah<br>
balkjsd<br>
dfsa<br>
dfas<br>
</body>
</html>
The overlay.init(); and overlay.show(); are needed to start the overlay. However, i am unable to start those without having a button to push doing so... which would defeat the purpose of having a loading box....
Any help to solve this problem would be great!:thumbsup:
David