Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    185
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Question please wait box loading...

    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:
    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!
    David

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    you cannot do that. you are calling to the document object model before it exsists. the DOM does not exsist until the body tag is closed, well for javascript purposes and I.E. . the document and the elements in it cannot be accessed until the body is loaded into the browser.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •