Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Multiple Javascript menus in a php page - only 1 menu works?!

    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/css...u_working.html

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

    http://jemmakidd.com/store_menus/css...T_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/...icalmenu.shtml

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

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

    Code:
    <!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...

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The first line of your script is bogus, so the script won't get very far:
    Code:
    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
    Code:
    var menuids=new Array("verticalmenu_jk", "verticalmenu_jkms", "verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by littlealex2009 View Post
    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.

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Done that but same issue persists...!

    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!

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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?

  • #6
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Resolved!

    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/...icalmenu.shtml

    Thanks for all your help...

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by littlealex2009 View Post
    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.

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •