homepage Welcome to WebmasterWorld Guest from 54.204.127.59
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Show/Hide Layers
But start with divs hidden...
rover




msg:1491450
 12:28 am on Feb 24, 2006 (gmt 0)

I want to use the following code to show and hide layers with Javascript and CSS, but I can't figure out how to modify the code so that the layers will start out hidden when the page is loaded.

With the code below the divs start out being shown, and then can be switched to being hidden, but I need the opposite.

I've tried various ways with the following part of the code with no luck:

------------

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display!= "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

------------

Here is the full code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Switch menu</title>
<style type="text/css">
<!--
body {
text-align:center;
margin:30px;
}
#wrapper {
text-align:left;
margin:0 auto;
width:500px;
min-height:100px;
border:1px solid #ccc;
padding:30px;
}
a {
color:blue;
cursor:pointer;
}
*#myvar {
border:1px dotted #ccc;
background:#f2f2f2;
padding:20px;
width: 500px;
}
-->
</style>

<script language="JavaScript">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display!= "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>
</head>

<body>

<p><a onclick="switchMenu('one_myvar');" title="Switch the Menu">Switch it now</a></p>
<div id="one_myvar"><div id="myvar">
<p>Some stuff here...</p>
</div></div>

<br><br>

<p><a onclick="switchMenu('two_myvar');" title="Switch the Menu">Switch it now</a></p>
<div id="two_myvar"><div id="myvar">
<p>Some stuff also here..</p>
</div></div>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnLoad()
{
window.open = SymWinOpen;
if(SymRealOnUnload!= null)
SymRealOnUnload();
}

function SymOnUnload()
{
if(SymRealOnLoad!= null)
SymRealOnLoad();
window.open = 'SymRealWinOpen';
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

 

DrDoc




msg:1491451
 7:40 am on Feb 24, 2006 (gmt 0)

In your style sheet:

#one_myvar, #two_myvar {
display: none;
}

rover




msg:1491452
 4:23 pm on Feb 24, 2006 (gmt 0)

Thanks very much for your help. When I tried adding:

#one_myvar, #two_myvar {
display: none;
}

to the styles, then when the page loads the divs are hidden, but clicking on the links no longer toggles them open.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved