CodingForums.com - Two menus. Two buttons. Need some help

Page 1 of 2

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Two menus. Two buttons. Need some help (http://www.codingforums.com/showthread.php?t=286639)

voodazzed

01-29-2013 03:15 PM

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 :)

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 (Post 1309503)

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 (Post 1309505)

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 (Post 1309507)

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!:D

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 (Post 1309618)

First off, you're most welcome. Happy to help. :thumbsup:

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 (Post 1309650)

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? :o

All times are GMT +1. The time now is 10:14 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page