...

View Full Version : New to js and I have some questions on a menu that I am setting up



musher
01-19-2005, 11:19 PM
I guess this is more of a learning exercise then anything and I got answers to most of my questions either here or google, but still have a few, the basics for this page was gotten from one of the posts here.

1. Just want to make sure I understand how the on "OpenSubMenu" function works:

SubMenu is a variable that contains name of division passed from the onclick to the function?
and the function does
if style display for variable = none
set style display for the variable = blank (blank = Display the division)
else
set style display for variable = none

2. on the first function "opensubmenu" what does the return false do, I read some were that it cancels default action in this case does that mean it's canceling the onclick or that it is canceling out the link? or am I totally off the wall on my understanding.

3. Was trying to write a function with out the if statment "CloseSubMenu" (I realise that this function would only set style display = " " or display on) but was unable to get it to function, I guessing that my syntax must be off.




<html>
<head>
<title>Sub Menu</title>

<script type="text/javascript">
function OpenSubMenu(SubMenu){
if(document.getElementById([SubMenu]).style.display == 'none'){
document.getElementById([SubMenu]).style.display ='';
}else{
document.getElementById([SubMenu]).style.display ='none';
}
return false;
}
</script>

<script type="text/javascript">
function CloseSubMenu(SubMenu){
document.getElementById([SubMenu]).style.display == ''
}
</script>

<script language="javascript" type="text/javascript">
function submenusetup() {
document.all.Home.style.display ='none';
document.all.Menu2.style.display ='none';
}
</script>

</head>

<body onload="submenusetup()">
<h1>Test Page</h1>

<p><a href="#" onclick="OpenSubMenu('Home');">+ Menu Item One</a></p>
<div id="Home">
<p>Sub Menu 1-1</p>
<p>Sub Menu 1-2</p>
</div>

<p><a href="#" onclick="OpenSubMenu('Menu2');">+ Menu Item Two</a></p>
<div id="Menu2">
<p>Sub Menu 2-1</p>
</div>

<p><a href="#" onclick="OpenSubMenu('Menu3');">+ Menu Item Three</a></p>
<div id="Menu3" style="display:none">
<p>Sub Menu 3-1</p>
</div>

<p><a href="#" onclick="CloseSubMenu('Menu4');">+ Menu Item Four</a></p>
<div id="Menu4" style="display:none">
<p>Sub Menu 4-1</p>
<p>Sub Menu 4-2</p>
<p>Sub Menu 4-3</p>
<p>Sub Menu 4-4</p>
</div>

</body>
</html>

Spudhead
01-20-2005, 01:46 PM
1. Just want to make sure I understand how the on "OpenSubMenu" function works:
SubMenu is a variable that contains name of division passed from the onclick to the function?

Yup, spot on. I actually think that to display the Div correctly, you need to set its display to 'block', not blank; it's working at the moment because 'block' is the default and if it sees an empty value then it uses the default.


2. on the first function "opensubmenu" what does the return false do, I read some were that it cancels default action in this case does that mean it's canceling the onclick or that it is canceling out the link?

Yeah, pretty much. I don't think it's doing much in this case because you're calling the function from the onClick. If you were to call it via:
<a href="javascript:OpenSubMenu('Home');"> then the 'return false' would stop the default action of the <a> tag, which is to try and go to wherever you specify in the href bit.


3. Was trying to write a function with out the if statment "CloseSubMenu" (I realise that this function would only set style display = " " or display on) but was unable to get it to function, I guessing that my syntax must be off.

It looks ok to me - try adding a semicolon on the end of the line?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum