...

View Full Version : menu image-swap triggered by onclick



mst
06-15-2009, 09:17 PM
Hello, I'm having a lot of trouble with a requirement. I'm trying to build a menu, similar to the fairly standard kind where the images are swapped on mouseover. (example (http://www.javascriptkit.com/script/script2/verticalmenu.shtml))
Mine would just be toggling visibility of a text area on the same page, something like this:

There will be a collection of buttons

When you click one - you'll see its ON state and some text will show in a different area of the page
When you click a different one, the previously ON button will show it's OFF state, its corresponding text is hidden, and the new button will show it's ON state and related text.

When I'm googling to find something like this I only find rollover menus. So my question is 1) has anyone seen something similar that I could modify?
or 2) can you help me with how to approach this... should i loop through the buttons and then change them to their alternate state based on ID?

I think I'm making this harder for myself than it actually is. :confused: Would someone help me to work out the logic of how to implement this? Thanks in advance.

Old Pedant
06-15-2009, 09:35 PM
Yes, you are surely making it harder than it is.


<html><head>
<script>
function choose(which)
{
for ( var i = 1; i <= 4; ++i )
{
var button = document.getElementById("RB"+i);
var text = document.getElementById("TEXT"+i);
button.className = (button == which) ? "RBON" : "RB";
text.style.display = (button == which) ? "block" : "none";
}
}
</script>
<style>
div.TEXT { border: solid blue 1px; background-color: lightblue; display: none; width: 450px; }
input.RB { border: solid red 1px; background-color: pink; color: red; width: 100px; }
input.RBON { border: solid blue 1px; background-color: lightblue; color: blue; width: 100px; }
</style>
</head>
<body>
<form>
<input class="RB" type=button id="RB1" value="First" onclick="choose(this);">
<input class="RB" type=button id="RB2" value="Second" onclick="choose(this);">
<input class="RB" type=button id="RB3" value="Third" onclick="choose(this);">
<input class="RB" type=button id="RB4" value="Fourth" onclick="choose(this);">
<br/><br/>
<div id="TEXT1" class="TEXT">Once upon a midnight dreary</div>
<div id="TEXT2" class="TEXT">While I pondered, weak and weary</div>
<div id="TEXT3" class="TEXT">O'er many a tome</div>
<div id="TEXT4" class="TEXT">Of long forgotten lore...</div>
</form>
</body>
</html>

I just used buttons with text and color, so that I didn't have to upload images here, but I'm sure you can see that you could use, for example, image buttons in place of those.

jmrker
06-16-2009, 04:55 AM
Old_Pedant

Looking at your posted code gave me the idea for the creation of a SUPER EASY tab display! ;)



<html>
<head>
<title>Tab Display</title>
<script type="text/javascript">
function choose(which) {
var maxTabs = 4;
for ( var i = 1; i <= maxTabs; ++i ) {
var button = document.getElementById("RB"+i);
var text = document.getElementById("TEXT"+i);
button.className = (button == which) ? "RBON" : "RB";
text.style.display = (button == which) ? "block" : "none";
}
}
</script>

<style>
div.TEXT { border: solid blue 1px;
background-color: lightblue;
display: none;
width: 450px;
height: 200px;
overflow:auto;
}
div.TEXT ul { font-weight:bold;
margin-left:-35px;
}
div.TEXT li {
font-weight:normal;
list-style: none;
margin-left:16px;
}

input.RB { border: solid black 1px;
background-color: white;
color: black;
width: 70px;
}
input.RBON { border: solid blue 1px;
background-color: lightblue;
color: blue;
width: 70px;
}
</style>

</head>
<!-- body -->
<!-- use following to initialize display as full display -->
<body onload="choose(document.getElementById('RB1'))">
<form>
<div id="tabContainer" style="position:relative; top:100px; left:200px">
<input class="RB" type=button id="RB1" value="First" onclick="choose(this);">
<input class="RB" type=button id="RB2" value="Second" onclick="choose(this);">
<input class="RB" type=button id="RB3" value="Third" onclick="choose(this);">
<input class="RB" type=button id="RB4" value="Fourth" onclick="choose(this);">
<br/>
<div id="TEXT1" class="TEXT">
<ul>Tab Info 1A <li>1a-1</li> <li>1a-2</li> </ul>
<ul>Tab Info 1B <li>1b-1</li> <li>1b-2</li> </ul>
<ul>Tab Info 1C <li>1c-1</li> <li>1c-2</li> </ul>
<ul>Tab Info 1D <li>1d-1</li> <li>1d-2</li> </ul>
<ul>Tab Info 1E <li>1e-1</li> <li>1e-2</li> </ul>
</div>
<div id="TEXT2" class="TEXT">
<ul>Tab Info 2a <li>2a-1</li> <li>2a-2</li> </ul>
<ul>Tab Info 2b <li>2b-1</li> <li>2b-2</li> </ul>
</div>
<div id="TEXT3" class="TEXT">
<ul>Tab Info 3 <li>3-1</li> <li>3-2</li> </ul>
</div>
<div id="TEXT4" class="TEXT">
<ul>Tab Info 4 <li>4-1</li> <li>4-2</li> </ul>
</div>
</div>
</form>
</body>
</html>


And with a little more modification, a horizontal menu display.


<html>
<head>
<title>Tab Horiz. Menu</title>
<script type="text/javascript">
function choose(which) {
var maxTabs = 4;
for ( var i = 1; i <= maxTabs; ++i ) {
var button = document.getElementById("RB"+i);
var text = document.getElementById("TEXT"+i);
button.className = (button == which) ? "RBON" : "RB";
text.style.display = (button == which) ? "block" : "none";
}
}
</script>

<style>
div.TEXT { border: solid blue 1px;
background-color: lightblue;
display: none;
width:800px;
}
#tabContainer span {
border-right: solid blue 1px;
padding-left:10px;
padding-right:10px;
width:70px;
text-align:center
}
input.RB { border: solid black 1px;
background-color: white;
color: black;
width: 70px;
}
input.RBON { border: solid blue 1px;
background-color: lightblue;
color: blue;
width: 70px;
}
</style>

</head>
<!-- body -->
<!-- use following to initialize display as full display -->
<body onload="choose(document.getElementById('RB1'))">
<form>
<div id="tabContainer" style="position:relative; top:20px; left:20px">
<input class="RB" type=button id="RB1" value="First" onclick="choose(this);">
<input class="RB" type=button id="RB2" value="Second" onclick="choose(this);">
<input class="RB" type=button id="RB3" value="Third" onclick="choose(this);">
<input class="RB" type=button id="RB4" value="Fourth" onclick="choose(this);">
<br/>
<div id="TEXT1" class="TEXT">
<span onclick="alert('1')">Menu Info 1</span>
<span onclick="alert('1.1')">1-1</span>
<span onclick="alert('1.2')">1-2</span>
</div>
<div id="TEXT2" class="TEXT">
<span onclick="alert('2')">Menu Info 2</span>
<span onclick="alert('2.1')">2-1</span>
<span onclick="alert('2.2')">2-2</span>
</div>
<div id="TEXT3" class="TEXT">
<span onclick="alert('3')">Menu Info 3</span>
<span onclick="alert('3.1')">3-1</span>
<span onclick="alert('3.2')">3-2</span>
</div>
<div id="TEXT4" class="TEXT">
<span onclick="alert('4')">Menu Info 4</span>
<span onclick="alert('4.1')">4-1</span>
<span onclick="alert('4.2')">4-2</span>
</div>
</div>
</form>
</body>
</html>


Two pretty neat applications for the price of one (free). :D
Might even become better looking with some who understands CSS better than me.

Thank you! :thumbsup:

Old Pedant
06-17-2009, 01:41 AM
Hey, I like the horizontal menu adaptation! Hadn't thought of the twist.

I was doing something similar for a simple tab system but didn't tumble to the menu.

Thanks right back!

mst
06-17-2009, 10:14 PM
wow, thanks so much to both of you!

two more questions if I may:

(button == which) ? "RBON" : "RB";
I see how this works but I can't say I understand the syntax... what subject-header would I look under to find more info in a tutorial/reference?

second Q is since I'm new to this forum -- I want to "thank" you both - will the forum let me do that or only one?

jmrker
06-17-2009, 11:50 PM
Questions:

1. I believe the statement is called a 'ternary' syntax and can usually be found in the logic or 'if' statement descriptions
Here's one description: http://www.hscripts.com/tutorials/javascript/ternary.php
but a 'google' search will display several others.

2. Yes, I think you can thank more than one. But if not, most of the work was done by 'Old Pedant' as I just stole his idea for another use and did not add much to your problem.

Good Luck!
:thumbsup:

Old Pedant
06-17-2009, 11:53 PM
The syntax


button.className = (button == which) ? "RBON" : "RB";

is using the "ternary operator". If you get any decent JS reference and look in "operators" you'll find it there.

That operator has been around a long time. I think it existed in "B" (the predecessor to "C") back in the early 1970's. It's available in most languages that are based on C syntax: PHP, Java, C++, C#, Perl (I think...not a Perl person), and JavaScript.

It's simple:


variable = condition ? value1 : value2

is evaluated the same as if you had coded:


if ( condition )
variable = value1;
else
variable = value2;

But it has the advantage that it can be used any place any other expression element can be used, not just in assignments. So, for example, you could convert code such as:


if ( a == 1 )
callSomething("testing");
else
callSomething("never mind");

into simply


callSomething( a == 1 ? "testing" : "never mind" );

And, of course, it can be used multiple times in the same expression and even be nested:


var foo = a < 20 ? "small" : a > 40 ? a > 60 : "extra large" : "large" : "medium";
though that's so ugly I would at least rewrite it as
var foo = a < 20 ? "small" : ( a > 40 ? ( a > 60 : "extra large" : "large" ) : "medium" );

Okay?

Re the "thanking" rules: No idea. Doesn't matter. I'm not sure what "thanks" points buy us, in any case. So far, nobody a codingforums has offered me any gold watches. <grin/>

jmrker
06-18-2009, 12:11 AM
For 'Old Pedant': :D


That operator has been around a long time.
I think it existed in "B" (the predecessor to "C") back in the early 1970's.
It's available in most languages that are based on C syntax: PHP, Java, C++, C#,
Perl (I think...not a Perl person),
and JavaScript.


Perl does ternary. :thumbsup:
See: http://www.uic.edu/depts/accc/seminars/perli/expressions.html
:)

Old Pedant
06-18-2009, 12:29 AM
Figured Perl used it, since it uses so much other similar syntax. I "read" Perl, just don't write it. <grin/>

Thanks.

mst
06-29-2009, 10:22 PM
Thank you both so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum