Two menus. Two buttons. Need some help

voodazzed · 01-29-2013, 03:15 PM

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

Philip M · 01-29-2013, 04:00 PM

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.

jmrker · 01-29-2013, 04:05 PM

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!

voodazzed · 01-29-2013, 04:58 PM

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!

Philip M · 01-29-2013, 05:03 PM

Quote:

Originally Posted by voodazzed

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

What does that mean???

voodazzed · 01-29-2013, 05:05 PM

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?

voodazzed · 01-29-2013, 05:07 PM

Quote:

Originally Posted by Philip M

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.

Philip M · 01-29-2013, 05:20 PM

Quote:

Originally Posted by voodazzed

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.

jmrker · 01-29-2013, 06:22 PM

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>

voodazzed · 01-29-2013, 10:45 PM

That's exactly what I'm looking for! Thanks so much for your help!

voodazzed · 01-30-2013, 01:12 AM

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!

jmrker · 01-30-2013, 02:08 AM

Quote:

Originally Posted by voodazzed

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

voodazzed · 01-30-2013, 05:09 AM

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!

jmrker · 01-30-2013, 02:41 PM

Quote:

Originally Posted by voodazzed

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.

voodazzed · 01-30-2013, 05:22 PM

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?