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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Leeds, UK
    Posts
    83
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dynamically creating hyperlinks

    I am creating a pop-up menu/submenu thingy by using a function to read from an array containing info on the submenus, and dynamically attaching a div containing submenu hyperlinks to the menu item. Make sense?

    All is working fine except that the hyperlinks don't work (OK i guess that's not working fine at all). The menu pops up with the right items, and the status bar shows the right urls for the submenus, but they dont take you to the link. However right-clicking on a submenu and opening in new window does. Confusing. Also I have defined an a:hover class in the stylesheet which the submenus dont respond to. So are they hyperlinks or aren't they? And how do I get them to follow the link, and display as they should on hover? Anyway, let's see some code:

    Code:
    function addMenu(id)
    //function for creating submenu div
    {
    var mainMenu = document.getElementById(id);
    var subMenu = document.createElement("<div id='mycatSubMenu' class='subMenu'>");
    var sublist = cats[id];
    //for each subcat
    //create link
    //set href
    //set inner text
    //add to sub
    var count = sublist.length;
    for(i=0; i<count;i++){
      var link = document.createElement('a');
    //  link.href= '/products/category.php?catid='+count;
    link.href='/products/category.php?catid='+i;
      link.appendChild(document.createTextNode(sublist[i]));
      subMenu.appendChild(link);
    }
    
    mainMenu.appendChild(subMenu);
    
    }
    Here's the html showing the main menu items
    Code:
    <div id="223" style="position:relative" onmouseover="addMenu(id)"><a name="Accounting Book/Pa..." href="../products/category.php?catid=223">&nbsp;<&nbsp;Accounting Book/Pa...</a></div>
    <div id="224" style="position:relative" onmouseover="addMenu(id)">
    <a name="Adhesives" href="../products/category.php?catid=224">&nbsp;<&nbsp;Adhesives</a></div>
    <div id="136" style="position:relative" onmouseover="addMenu(id)">
    <a name="Air Care Germokill" href="../products/category.php?catid=136">&nbsp;<&nbsp;Air Care Germokill</a></div>
    <div id="183" style="position:relative" onmouseover="addMenu(id)">
    <a name="Air Conditioners" href="../products/category.php?catid=183">&nbsp;<&nbsp;Air Conditioners</a></div>
    And here's the array containing the submenu information:
    Code:
    <script>var cats = new Array();
    cats[195] = new Array('Chemical Absorbents','General Purpose Absorbents','Oil Only Absorbents','Spill Kits');
    cats[223] = new Array('Analysis ruled pad','Analysis ruled paper','General Trader/VAT book','Halfbound account book','Postage & Delivery book','Standard account book','Standard Analysis Book','Wage & S.S.P book');
    cats[224] = new Array('All Purpose adhesive','Dry adhesive','Glue Roller/Refill','Glue Stick/Gluepen','Paste/Smooth');
    cats[136] = new Array('Air Purifiers (Germokill)');
    cats[183] = new Array('Air Conditioners','Air free Air Purifier');
    </script>

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    take care that you are dealing with a 2'nd array. cats is a 2'nd array. On the other hand to pass the self id of an element you must use the this self refereence. Ant third... id, as all the values, is a string, but the index of an array's element is a number

    so that (even I am not sure what is your intention) I guess that you must have something like:

    function addMenu(id){
    var id = Number(id);
    ...

    document.createTextNode(sublist[id][i]))
    }

    ...

    <div id="223" style="position:relative" onmouseover="addMenu(this.id)">
    Last edited by Kor; 07-05-2005 at 09:56 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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