Javascript preloader breaking dropdown menu

**medlington** · Apr 12th, 2012, 08:37 AM

Hi,

Im having trouble with a dropdown menu and a javascript preloader.

The site was working fine until I added this preloader to it so that the entire page loaded at the same time. The menus at the bottom used to drop up as you can see on this page:

http://www.arjanbaagh.com/index.php

but now I've added the preloader the menus drop down?

http://www.arjanbaagh.com/aboutus-concept.php

heres the script that I've added as the preloader:

in the head:

Code:

<script language="javascript" type="text/javascript">
function showpage() {
document.getElementById('loader').style.display = "none";
document.getElementById('main').style.display = "block";
}
</script>

and start of body:

Code:

<body onload="showpage();">
<div style="height:100%; width:100%; display:block;" id="loader">
</div>
<div style="height:100%; width:100%; display:none;" id="main">

and then I just put a closing div at the bottom of the body so all of the content is inside the Div that should be preloaded.

Im guessing that there is some conflict in the javascript but just cant figure out what it is?

Has anyone got any ideas or different ways I can preload the images?

Thanks

**Web Design Forums** · Apr 12th, 2012 08:37 AM

**onlinetraining** · Apr 19th, 2012, 09:02 AM

It seems you have resolved the issue because the sub-menus work the same way in both pages now.

**medlington** · Apr 19th, 2012, 09:25 AM

Thanks for the reply, yes I fixed it but Im not too sure what the problem was.

I think it was something to do with the relative positioning of the dropup menus being affected by the new 'loader' div s positioning.

When I set the preloader div to be absolute positioning with a different Z-Index it seemed to fix it

Thread: Javascript preloader breaking dropdown menu

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions