Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder musher's Avatar
    Join Date
    Jan 2005
    Location
    Minnesota
    Posts
    203
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New to js and I have some questions on a menu that I am setting up

    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.


    Code:
    <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>
    Thanks
    Jim M

    "Lord, help me to become the person my dog thinks I am" - Dawn Ewing
    "If you must know. Yes, I do enjoy running after the dog sled when I fall off" - Me

    www.huskyzone.com -- Woodland Siberians

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by musher
    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.

    Quote Originally Posted by musher
    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.

    Quote Originally Posted by musher
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •