...

View Full Version : Multiple Javascript menus in a php page - only 1 menu works?!



littlealex2009
07-21-2009, 03:43 PM
Hi - I want to have 3 javascript menus in a page - but I can only get it to work with one instance of the menu - see this link for the working copy with 1 menu:

http://jemmakidd.com/store_menus/cssvert_menu_working.html

Here is the link to the non-working version with 3 menus:

http://jemmakidd.com/store_menus/cssvert_menu_NOT_working.html

Notice in the non-working instance that the menus don't have 2nd level drop down menus that appear dynamically on mouseover - and they should like the working version.

I have been using javascriptkit.com's code which you will find here:

http://www.javascriptkit.com/script/script2/verticalmenu.shtml

The javascript indicates I CAN have multiple menus in a page as you will see from the code here:




var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)



And here is my html code with the three declared menus in it:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

<script type="text/javascript" src="cssverticalmenu_NOT_working.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at # for this script and 100s more

***********************************************/

</script>

</head>

<body bgcolor="#000000">


<table width="1109" height="109" border="1">
<tr>
<th width="308" scope="row"><div align="left">
<ul id="verticalmenu_jk" class="glossymenu">
<li><a href="#">FACE</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">FOUNDATION</a></li>
<li><a href="#">POWDER</a></li>
<li><a href="#">CONCEALER</a></li>
<li><a href="#">BLUSH</a></li>
<li><a href="#">LUMINISORS</a></li>
</ul>
</li>
<li><a href="#">EYES</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">SHADOW</a></li>
<li><a href="#">MASCARA</a></li>
<li><a href="#">BROW</a></li>
<li><a href="#">LASH</a></li>
<li><a href="#">LINER</a></li>
<li><a href="#">GLOSS</a></li>
</ul>
</li>
<li><a href="#">LIPS</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">LIP CARE</a></li>
<li><a href="#">LIPSTICK</a></li>
<li><a href="#">LIP GLOSS</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">TOOLS</a>
<ul>
<li><a href="#">EYE</a></li>
<li><a href="#">FACE</a></li>
<li><a href="#">LIP</a></li>
<li><a href="#">BAGS/CASES</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">COLLECTIONS</a></li>
<li><a href="#">MULTI-PURPOSE</a></li>
</ul>
</div></th>
<td width="272"><ul id="verticalmenu_jkms" class="glossymenu">
<li><a href="#">FACE</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">FOUNDATION</a></li>
<li><a href="#">POWDER</a></li>
<li><a href="#">CONCEALER</a></li>
<li><a href="#">BLUSH</a></li>
<li><a href="#">LUMINISORS</a></li>
</ul>
</li>
<li><a href="#">EYES</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">SHADOW</a></li>
<li><a href="#">MASCARA</a></li>
<li><a href="#">BROW</a></li>
<li><a href="#">LASH</a></li>
<li><a href="#">LINER</a></li>
<li><a href="#">GLOSS</a></li>
</ul>
</li>
<li><a href="#">LIPS</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">LIP CARE</a></li>
<li><a href="#">LIPSTICK</a></li>
<li><a href="#">LIP GLOSS</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">TOOLS</a>
<ul>
<li><a href="#">EYE</a></li>
<li><a href="#">FACE</a></li>
<li><a href="#">LIP</a></li>
<li><a href="#">BAGS/CASES</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">COLLECTIONS</a></li>
<li><a href="#">MULTI-PURPOSE</a></li>
</ul></td>
<td width="1280"><ul id="verticalmenu_jkmspro" class="glossymenu">
<li><a href="#">FACE</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">FOUNDATION</a></li>
<li><a href="#">POWDER</a></li>
<li><a href="#">CONCEALER</a></li>
<li><a href="#">BLUSH</a></li>
<li><a href="#">LUMINISORS</a></li>
</ul>
</li>
<li><a href="#">EYES</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">SHADOW</a></li>
<li><a href="#">MASCARA</a></li>
<li><a href="#">BROW</a></li>
<li><a href="#">LASH</a></li>
<li><a href="#">LINER</a></li>
<li><a href="#">GLOSS</a></li>
</ul>
</li>
<li><a href="#">LIPS</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">LIP CARE</a></li>
<li><a href="#">LIPSTICK</a></li>
<li><a href="#">LIP GLOSS</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">TOOLS</a>
<ul>
<li><a href="#">EYE</a></li>
<li><a href="#">FACE</a></li>
<li><a href="#">LIP</a></li>
<li><a href="#">BAGS/CASES</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">COLLECTIONS</a></li>
<li><a href="#">MULTI-PURPOSE</a></li>
</ul></td>
</tr>
</table>
</body>
</html>



So of course my question is - what have I missed and how do I get it to work!?

Many thanks in advance...

venegal
07-22-2009, 12:06 AM
The first line of your script is bogus, so the script won't get very far:


var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas

What you got there is an array containing one large string, while it should be an array containing a bunch of strings representing the element IDs.

So, change that to

var menuids=new Array("verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas

fside
07-22-2009, 05:59 AM
var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s)



It wants an array, and there's a shorthand for Array constructor.

So just this:

var menuids=["verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro"].split(", ") //Enter id(s)

Of course, since you have so few, it's just as easy to do as suggested, above, and write:

var menuids=["verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro"] //Enter id(s)

If you have another example with a lot of ids, just tacking on .split(",") (which splits a string into an array at points where it finds the specified text, here a comma), would fix your problem instantly, if that's the only problem.

littlealex2009
07-22-2009, 08:24 AM
Hi there - thanks for your help so far guys - unfortunately that didn't sort out the issue...

I have made the following change to the .js file like this:

var menuids=("verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas

I have tried this with square & round brackets as I notice you both use these different types in your suggested code...?

I then reference each of these ids in the html code as follows:

<ul id="verticalmenu_jk" class="glossymenu">

<ul id="verticalmenu_jkms" class="glossymenu">

<ul id="verticalmenu_jkmspro" class="glossymenu">

But still ONLY the first menu has a second level - the next two do NOT - here is an upload of the page:

http://jemmakidd.com/store_menus/cssvert_menu.html

Need to get this sorted so please help anyone! :confused:

Philip M
07-22-2009, 08:40 AM
var menuids= new Array ("verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas. Round brackets.

There are several different ways of declaring an array. Another way is to use literal notation:

var menuids=["verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro"] //Enter id(s)
Square brackets.

Confusing, eh? :eek:

littlealex2009
07-22-2009, 08:42 AM
Sorted that out - changed the following line:

var menuids=["verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro"] //Enter id(s) of UL menus, separated by commas

and made sure the brackets were square, not rounded which they were on the original script from these guys...

http://www.javascriptkit.com/script/script2/verticalmenu.shtml

Thanks for all your help...:thumbsup:

abduraooft
07-22-2009, 08:44 AM
I'd recommend a CSS based one instead, since it'd be more reliable and accessible even in the absence of javascript. Refer http://www.htmldog.com/articles/suckerfish/dropdowns/

venegal
07-22-2009, 12:06 PM
Sorted that out - changed the following line:

var menuids=["verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro"] //Enter id(s) of UL menus, separated by commas

and made sure the brackets were square, not rounded which they were on the original script from these guys...


It seems like, while you may have gotten it to work, you still didn't quite sort it out in your head:

There are two ways to initialize an array:

1.) [] (square brackets)
2.) new Array() (the constructor, using parentheses)

What you had in your original script and what "these guys" told you is the second way, which works perfectly, if you hadn't introduced that other error.

What you did in your second post (using parentheses without a constructor) doesn't work, and nobody told you to do so.

littlealex2009
07-22-2009, 12:48 PM
Thanks abduraooft and venegal...

I understand now what you mean - things got confused as I'm not conversant with js as yet so thanks for the explanation - I had removed the 'new Array' bit and replaced brackets and ended up with a kind of mess of code but not realising it - venegal when I said 'these guys' that was not meant in any offish way as their code has been really useful to me...:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum