Help with basic page loading DIV.
Hi Guys,
I have a site that is very jQuery and image heavy. The main sections of the site link to sections that are built with several Tabs, and as it loads, you briefly see all the content load and then it is hidden by the Tabs code.
The plan is to have a full window DIV that sits above all the content with a loading icon that plays until the entire page loads, and then it fades down.
After some hair pulling and research I have code in place that does exactly as I ask, however it does not seem to work in IE6+7. It works in all other browsers.
The current code is:
-
...
</head>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#cover').fadeOut(2000);
});
});
</script>
<body>
<div id="cover"></div>
...
CSS for the loading DIV is:
-
#cover {
height: 100%;
width: 100%;
background:#000000 url(../images/progress.gif) no-repeat center;
z-index: 100;
position:absolute;
}
A working link is
http://www.v2i.com.au/3d_visualisation.html
Any help would be fantastic and greatly appreciated as i've been killing myself over this problem.
Thanks.