Dynalically created hyperlinks

[hessodreamy]

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:

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

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

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

 

[BillyRayPreachersSon]

One of the problems with this is that every time you mouse over a menu item, you're adding the submenu items. This means that if you mouse over "Accounting Book/Pa..." 3 times, you'll end up with 3 sets of submenu items, instead of 1 set.

Why create the submenu items each time? Why not just do it once, when the page has loaded... or even better, not use JS at all to create your menus, instead using plain old HTML which you enrich with CSS and JS?

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[hessodreamy]

Well that was my first approach, however there is just such a massive amount of information involved (100 or so menu items and maybe a thousand submenus) and the pure weight of all the html just slowed up the page load too much.

Thought I was being really clever in sending a reduced amount of data (an array) to the page and using it to create the submenu html at runtime. If only I could get it to work...

 

[BillyRayPreachersSon]

You could try the onload event, then... that would let you keep your arrays, but only create the menu options once.

Hope this helps,
Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[hessodreamy]

Not sure I understand what you mean.

Let me clarify anyway, that I have a mechanism for opening/closing the menus properly ie so that you dont get 3 menus on top of each other. I just didnt post it for the sake of clarity - that idea worked then...

Given the weight of the html for all the submenus, creating the menus upon hovering seems to me to be a pretty good way to go. So what's actually wrong with my code?

 

[BillyRayPreachersSon]

So what's actually wrong with my code?

I mentioned that before - you are creating the submenus every time you roll over a menu, which means you will end you with many menu elements being created.

You could either create all the submenus at load time, and remove the code to create them from the main menu items... or modify the addMenu function to detect for the presence of the menu, and do nothing if it already exists. The latter would involve less code changes, I'd say.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]