 Multiple Jump Menus, java problems |
  |
| Candid-Ishida |
 Aug 24 2007, 08:39 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 24-August 07 Member No.: 3,622  |
I am trying to create a menu with drop down jump menus but I'm quite inexperienced when it comes to javascript. I am almost sure the code in the heading is WRONG but I have changed it around many ways and still, nothing works. The menu works perfectly when there is only one. When I try to add others, though, they all point to the same set of links, overriding the targets in the first menu (there are only two so far, I haven't created the others yet since these two won't work) For example, right now, all the links in jumpMenu are going to the pages selectable from jumpMenu2. jumpMenu2 works properly.
Here is my code: <script LANGUAGE="JavaScript"> //this function supports the UNIT jump menu function jump(){ //find out what is currently selected var loc=document.navigation.jumpMenu.options[document.navigation.jumpMenu.selectedIndex].text; //give user their chosen page if (loc == "Aunt Linda's Library"){ parent.location="library.html"; }else if (loc == "Books for Kids"){ parent.location="library.html#kids"; }else if (loc == "Books for Grownups"){ parent.location="library.html#grown"; }else if (loc == "Books to Share"){ parent.location="library.html#share"; } //this function supports the UNIT jump menu function jump(){ //find out what is currently selected var loc=document.navigation.jumpMenu2.options[document.navigation.jumpMenu2.selectedIndex].text; //give user their chosen page if (loc == "Meet the Elves"){ parent.location="elf1.html"; }else if (loc == "Elf Portraits"){ parent.location="elf1.html"; }else if (loc == "Elfery Letters"){ parent.location="elf2.html"; }else if (loc == "Elves Q & A"){ parent.location="elf3.html"; } } </SCRIPT> </head> <body> <div id="center"> <div id="seal"><img src="images/logowithpeapod.jpg" /></div><div id="logo"><img src="images/Whimsmoore_logo_finished_sampl2.jpg" /></div> <div id="motto">~Inviting Children's Imaginations Out To Play</div> <div id="navtop"><form name="navigation">Elfery Gifts }{ <select name="jumpMenu" class="navbox" onchange="jump()"> <option selected="selected">Aunt Linda's Library </option> <option>Books for Kids </option> <option>Books for Grownups </option> <option>Books to Share </option> </select> }{ <select name="jumpMenu2" class="navbox" onchange="jump()"> <option selected="selected">Meet the Elves </option> <option>Elf Portraits </option> <option>Elfery Letters </option> <option>Elf Q & A </option> </select> }{ About Us</form></div> The rest of the heading and body have been excluded since that code has nothing to do with the menus. My class 'navbox' is changing the font to match the rest of the page. The effect I am trying to create is a horizontal navigation with multiple drop down menus side by side. I have no idea what is wrong, though... Please help! |
  |
 
|
| pandy |
Aug 24 2007, 09:04 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
To start with you have given both functions the same name. How can the interpreter know which of them that's called?
|
|
|
|
| Darin McGrew |
Aug 24 2007, 09:07 PM
Post
#3
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
You kept the SELECT elements themselves distinct by naming one jumpMenu and the other jumpMenu2, but now you need to keep the onchange event handlers distinct (for example, by naming one jump() and the other jump2()).
Or you could create a single event handler that knows how to work with either SELECT element. That's a better approach in general, but requires more understanding of what you're doing. |
|
|
|
| Candid-Ishida |
Aug 24 2007, 09:48 PM
Post
#4
|
|
Group: Members Posts: 2 Joined: 24-August 07 Member No.: 3,622 |
QUOTE(Darin McGrew @ Aug 24 2007, 10:07 PM)  You kept the SELECT elements themselves distinct by naming one jumpMenu and the other jumpMenu2, but now you need to keep the onchange event handlers distinct (for example, by naming one jump() and the other jump2()). Or you could create a single event handler that knows how to work with either SELECT element. That's a better approach in general, but requires more understanding of what you're doing. Changing the function name worked! Thank you so much! I never would have realized I had to change something so simple. You've saved me a lot of frustration. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 08:32 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC