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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Two menus. Two buttons. Need some help

    Hello, long time lurker, first time poster here. I need some help with something that's been driving me batty lately (also fairly new to the world of js):

    I have two buttons and two menus that are nested inside the same div. What I would like to happen is when one button is clicked the former menu disappears and is replaced with the other menu and the other way around.

    The closest example of what I'm talking about are the "About" "Share" and "Add To" buttons on youtube, but I don't really care for the slide animation.
    Also I need each button to have an active state.

    Whew! This is probably something stupidly easy, but I'm a js newb so I would really appreciate any and all help in this matter

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,247
    Thanks
    203
    Thanked 2,556 Times in 2,534 Posts
    Is this what you are looking for?

    Code:
    <div id = "mydiv1" style="display:block">
    <select id = sel1">
    <option>First menu</option>
    </select>
    <input type = "button" id = but1" value = "Button 1" onclick = "toggle()">
    </div>
    <div id = "mydiv2" style="display:none">
    <select id = sel2">
    <option>Second menu</option>
    </select>
    <input type = "button" id = but2" value = "Button 2" onclick = "toggle()">
    </div>
    
    <script type = "text/javascript">
    function toggle() {
    var d1 = document.getElementById("mydiv1");
    var d2 = document.getElementById("mydiv2");
    if (d1.style.display == "block") {d1.style.display = "none"}
    else {d1.style.display = "block"}
    if (d2.style.display == "block") {d2.style.display = "none"}
    else {d2.style.display = "block"}
    }
    </script>

    The people who followed the Lord were called the 12 Decibels.
    - Pupil's answer to Catholic Elementary School test.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    You have provided a bunch of requirements, but very little code.
    For that reason, you get what I THINK you want. Modify to your heart's content.

    I don't use youtube very often, so I'm not sure I understand the layout design.
    The active state of each menu would be 'block' or 'none' in the following code.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    #menus { height:200px; width:200px; border:1px solid orange; }
    #menu1 { display:block; }
    #menu2 { display:none; }
    </style>
    
    </head>
    <body>
    <div id="menus">
     <button onclick="toggleMenus('menu1')" style="float:left"> First </button>
     <button onclick="toggleMenus('menu2')" style="float:right"> Second </button>
     <br style="clear:both">
     <div id="menu1">First menu display<br>
     </div>
     <div id="menu2">Second menu display<br>
     </div>
    </div>
    <script type="text/javascript">
    function toggleMenus(IDS) {
      var sel = document.getElementById('menus').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      document.getElementById(IDS).style.display = 'block';
    }
    </script>
    
    
    </body>
    </html>
    Good Luck!
    Last edited by jmrker; 01-29-2013 at 05:06 PM. Reason: Dang! That "Philip M" types fast!!!

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the replies! Both examples look promising and I look forward to trying them out.

    I realize I didn't post any code because at this point I don't have any useful to show at this point. I'm sure this will change when i start coding the new menu with the suggested additions.

    Also, how would I add an active state to the selected button?

    Thanks again!

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,247
    Thanks
    203
    Thanked 2,556 Times in 2,534 Posts
    Quote Originally Posted by voodazzed View Post
    Also, how would I add an active state to the selected button?
    What does that mean???

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay I tried both scripts and jmrker is closest to what I am talking about, however it neither one will work in IE 8 which is what I'm currently using. Both run fine in non-IE browsers.
    What could be the problem?

  • #7
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    What does that mean???
    haha sorry, I meant to say that the button remains highlighted in its hover state when it is clicked.

    UPDATE:
    I managed to get the code to work in IE 8. Apparently the Active-X blocker was on.
    Last edited by voodazzed; 01-29-2013 at 06:14 PM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,247
    Thanks
    203
    Thanked 2,556 Times in 2,534 Posts
    Quote Originally Posted by voodazzed View Post
    haha sorry, I meant to say that the button remains highlighted in its hover state when it is clicked.

    UPDATE:
    I managed to get the code to work in IE 8. Apparently the Active-X blocker was on.
    I use IE9 and obviously it works for me.
    Last edited by Philip M; 01-29-2013 at 06:23 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    Small change ...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    #menus { height:200px; width:200px; border:1px solid orange; }
    #menu1 { display:block; }
    #menu2 { display:none; }
    </style>
    
    </head>
    <body>
    <div id="menus">
     <button onclick="toggleMenus('menu1',this)" style="float:left;background-Color:lime"> First </button>
     <button onclick="toggleMenus('menu2',this)" style="float:right"> Second </button>
     <br style="clear:both">
     <div id="menu1">First menu display<br>
     </div>
     <div id="menu2">Second menu display<br>
     </div>
    </div>
    <script type="text/javascript">
    function toggleMenus(IDS,info) {
      var sel = document.getElementById('menus').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      var sel = document.getElementById('menus').getElementsByTagName('button');
      for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = 'transparent'; }
      document.getElementById(IDS).style.display = 'block';
      info.style.backgroundColor = 'lime';
    }
    </script>
    
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    voodazzed (01-30-2013)

  • #10
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's exactly what I'm looking for! Thanks so much for your help!

  • #11
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Once again the script works great, but I have a couple of questions about the script in your second script posting since I'm the type who likes to know how and why a script works rather than just copying and pasting:

    What is the purpose of the parameters in both the buttons and functions?

    Thanks again!

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    Quote Originally Posted by voodazzed View Post
    Once again the script works great, but I have a couple of questions about the script in your second script posting since I'm the type who likes to know how and why a script works rather than just copying and pasting:

    What is the purpose of the parameters in both the buttons and functions?

    Thanks again!
    First off, you're most welcome. Happy to help.

    Concerning the 2 arguments in the button function.
    The 1st controls the specific <div> tag associated with the particular menu to display.
    The 2nd controls the current button. Allows controls of the background-Color with the CSS style.display

  • #13
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay that makes sense to me, but why are the parameters given different names in the actual function (IDS,info) and why is 'this' used in place of 'info' in the buttons?

    Did I mention I'm fairly new to javascript? Thanks!

  • #14
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Arrow

    Quote Originally Posted by voodazzed View Post
    Okay that makes sense to me, but why are the parameters given different names in the actual function (IDS,info) and why is 'this' used in place of 'info' in the buttons?

    Did I mention I'm fairly new to javascript? Thanks!
    The IDS refers to the appropriate <div id='xxx' ....> element.
    The 'this' refers to the button element. 'info' is the placeholder for 'this' in the function being called.
    Two different elements, hence two different parameters.

  • #15
    New Coder
    Join Date
    Jan 2013
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Very cool. The IDS parameter makes sense to me because it is encompassing two different ids.

    I guess I was confused to why 'info' wasn't used in the button function instead of 'this', but 'this' actually refers to the button element itself, which is then represented in the actual function as 'info' and that is how javascript knows which element to make the changes to in regards to the 'info' placeholder.

    Am I correct in my deduction or at least close?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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