PDA

View Full Version : Overuse of Show / Hide DIVs?


drewgraham
01 Sep 2006, 05:42 AM
I'm building a site (http://www.drewgraham.net/mauleverer/new/www/) which is using show / hide divs (I'd prefer to use CSS for the menu, but the client wants specific, non-standard fonts).

This kinda works for the menu, although I'm thinking of finding a script that saves the menu structure with cookies to save the whole auto-collapse thing. I'm a Scripting novice (I'm at the copy and paste level), so advise appreciated on that.

I've tweked the menu so that if JavaScript is disabled, the menu is automatically open by setting the DIVs to display:block in the CSS and having an onLoad script to set this to display:none.

I also want to put a notice that the site works better with JavaScript enabled and give info on how to enable it. This is currently done with an display:block DIV that's hidden by an onLoad JavaScript function.

The problem is that every time you go to a new page, for a second, everything appears as display:block - so you can see the menu fully opened and the 'how to enable JavaScript' DIV is shown.

How do I stop this?

Thanks all.
drewgraham
01 Sep 2006, 05:50 AM
Sorry:

CSS Link
CSS (http://www.drewgraham.net/mauleverer/new/www/mauleverer_main.css)

JavaScript


<!-- This is the show / hide script for display:block divs-->
<script language="JavaScript" type="text/JavaScript">
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"none";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"none";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"none";
}
}
</script>

<!-- This is the show / hide script for display:none divs-->
<script language="JavaScript" type="text/JavaScript">
function showLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>


Body onLoad


<body onLoad="MM_preloadImages('images/nav/about_mauleverer_2.gif','images/nav/news_2.gif','images/nav/buying_collecting_2.gif','images/nav/mauleverer_collection_2.gif','images/nav/oak_2.gif','images/nav/pewter_2.gif','images/nav/viewing_2.gif','images/nav/contact_2.gif','images/nav/how_we_work_2.gif'); javascript:toggleLayer('buying_collecting'); javascript:toggleLayer('mauleverer_collection'); javascript:toggleLayer('how_we_work'); javascript:toggleLayer('javacheck');">