I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using was found through a quick Google search.
Below is the code snippet:
<style type="text/css">
body {
margin: 0px;
}
#overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
<!--
var overlay = {
click_on_overlay_hide: true,
show_loading_image: true,
loading_image: "http://www.leeparts.com/images/ajax-loader.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>