PDA

View Full Version : Div content displayed with Javascript



evan
01-31-2008, 05:02 PM
I use this script for easy menus:

the script has the following functions with vaiables:
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}


later I have
onClick="showmenu('help')" onMouseOut="hidemenu('help')

the 'help' appears and disappears. ---cool.

What I want to change should be simple but I don't know how to get the syntax
like onClick="showmenu('help'),hidemenu('about)" but it does not work.

I want more than one event with "onclick" because I have multiple <divs> with content positioned on the page and I want one <div> to stay visible and
remain visible until the others are clicked.

Can I do it?

Instead of a navbar with menus It should in theory place content and it works
as it is:

<html>
<head>
<style>
body{font-family:arial;}

p{color:black;text-decoration:underline;font:bold}
p:hover{color:#606060}

#about1{
font-size:100%;
position:absolute;
left:200px;
top: 20px;
color:black;
background:#7ac7f3;
z-index:10;
visibility: hidden;
}

#contact2{
font-size:100%;
position:absolute;
left:200px;
top: 300px;
color:black;
background:#7ac7f3;
z-index:12;
visibility: hidden;
}

#account3{
font-size:100%;
position:absolute;
left:200px;
top: 400px;
color:black;
background:#7ac7f3;
z-index:14;
visibility: hidden;
}

</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
</head>

<body>

<div id="about1">this will contain information about the company</div>
<div id="contact2">this will contain support information and contact information</div>
<div id="account3">this is an intro to how account management works</div>
<table width="298" border="0
">
<tr>
<td width="60"><p onClick="showmenu('about1')" OnMouseout="hidemenu('about1')"> About</p></td>
<td width="110"><p onClick="showmenu('contact2')" OnMouseout="hidemenu('contact2')"> Contact Us</p></td>
<td width="106"><p onClick="showmenu('account3')" OnMouseout="hidemenu('account3')" > My Account</p></td>
</tr>
</table>

</body>



</html>

thetestingsite
01-31-2008, 05:04 PM
Instead of a comma (,) between the onclick events, change it to a semicolon (;). For example, instead of this:



onClick="showmenu('help'),hidemenu('about)"


change to this:



onClick="showmenu('help'); hidemenu('about);"


Hope this helps.

evan
01-31-2008, 05:34 PM
Thanks a million bro,

-This easy Javascript I found on w3schools.com began life as menu code placed in tables -the menus were not in <divs> which was annoying when trying to control placement or resizing.

I have seen allot of more complicated code for swapping images, placing content etc.

Changing it to divs and using it this way is very handy now I can really use it!:)