Closed Thread Icon

Topic awaiting preservation: Help Needed - Loop through li setting mouseover functions (All end up pointing to last one) Pages that link to <a href="https://ozoneasylum.com/backlink?for=24323" title="Pages that link to Topic awaiting preservation: Help Needed - Loop through li setting mouseover functions (All end up pointing to last one)" rel="nofollow" >Topic awaiting preservation: Help Needed - Loop through li setting mouseover functions (All end up pointing to last one)\
 
Author Thread
jjarman
Obsessive-Compulsive (I) Inmate

From:
Insane since: Nov 2004

 posted posted 12-07-2004 07:41

I have a function that loops through a ul and checks each li for a sub ul.
If it finds one it creats a javascript function for mouseover and mouseout to create a dhtml menu.
Problem is this, when it is finished running, all the li mouseovers point to the last sub ul.

I'm sure this is simple and I'm not seeing it.

Cropped down code to illustrate the issue:

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

.dynamicMenu				{ clear: left; list-style-type: none; margin: 0px; padding: 0px; width: 111px; }

.dynamicMenu li				{ margin-top: 10px; display: block; float: left; }

.dynamicMenu li a			{ border: 1px solid #FFFFFF; line-height: 23px; display: block; width: 111px; color: #FFFFFF; text-align: center; text-decoration: none; background-color: #31394A; }

.dynamicMenu li a:hover		{ background-color: #212939; }

.dynamicMenu ul				{ visibility: hidden; display: none; border-top: 1px solid #FFFFFF; margin: -24px; margin-left: 114px; padding: 0px; list-style-type: none; text-align: left; width: 160px; position: absolute;  border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; overflow: hidden; }

.dynamicMenu ul li			{ margin-top: 0px; background-color: #333333; }

.dynamicMenu ul li span		{ border-right: 0px; border-left: 0px; border-top: 0px; border-bottom: 1px solid #FFFFFF; width: 180px; }

.dynamicMenu ul li span a	{ font-weight: normal; width: 180px; text-align: left; padding-left: 5px; }

</style>

<script type="text/javascript">

//<![CDATA[

function dynamicMenu()

{

	dynamicMenu.prototype.makeMenu	= makeMenu;

	dynamicMenu.prototype.showMenu	= showMenu;

	dynamicMenu.prototype.hideMenu	= hideMenu;



	function makeMenu(menuId)

	{

		var menuUL = document.getElementById(menuId);

		

		for (var a=0; a < menuUL.childNodes.length; ++a)

		{

			if (menuUL.childNodes[a].nodeName.toLowerCase() == 'li')

			{

				for (var b=0; b < menuUL.childNodes[a].childNodes.length; ++b)

				{

					if (menuUL.childNodes[a].childNodes[b].nodeName.toLowerCase() == 'ul')

					{

						var parentId	= menuUL.childNodes[a].id;

						var childId		= menuUL.childNodes[a].childNodes[b].id;

						alert("parentId=[" + parentId + "], childId=[" + childId + "]");

						document.getElementById(parentId).onmouseover	= function () { menu.showMenu(childId); };

					}

				}

				

			}

		}

		dynamicMenu.Registry[menuId]['numOfLines'] = numOfLi;

	}



	function showMenu(menuId)

	{

		alert("showMenu=[" + menuId + "]");

	}



	function hideMenu(menuId)

	{

		alert("hideMenu=[" + menuId + "]");

	}



}

var menu = new dynamicMenu();

//]]>

</script>

</head>

<body onload="menu.makeMenu('primaryMenu');">

<ul id="primaryMenu" class="dynamicMenu">

    <li id="menu1Container"><a href="/" title="Home" accesskey="h">Home</a></li>

    <li id="menu2Container"><a href="/" title="Outlook" accesskey="o">Outlook</a></li>

    <li id="menu3Container"><a href="/" title="Services" accesskey="s">Services</a> 

      <ul id="menu3Content">

        <li><a href="/" title="Consuling Services">Conslting Services</a></li>

        <li><a href="/" title="Design and Creation">Design / Creation</a></li>

        <li><a href="/" title="Hosting Solutions">Hosting Solutions</a></li>

        <li><a href="/" title="Other Services">Other Services</a></li>

      </ul>

    </li>

    <li id="menu4Container"><a href="/" title="Portfolio" accesskey="p">Portfolio</a>   

      <ul id="menu4Content">

        <li><a href="/" title="Overview">Overview</a></li>

        <li><a href="/" title="Click2learn Corporation">Click2learn Corporation</a></li>

        <li><a href="/" title="Talisma Corporation">Talisma Corporation</a></li>

        <li><a href="/" title="iCat Corporation">iCat Corportion</a></li>

		<li><a href="/" title="Online Insurance Services">Online Insurance Services</a></li>

        <li><a href="/" title="Other">Other</a></li>

      </ul>

    </li>

    <li id="menu5Container"><a href="/" title="Support" accesskey="h">Support</a></li>

    <li id="menu6Container"><a href="/" title="Contact Informtion" accesskey="c">Contact Info</a>

	  <ul id="menu6Content">

	    <li><a href="/" title="Overview">Overview</a></li>

	    <li><a href="/" title="Send Us An Email">Send Us An Email</a></li>

	  </ul>

	</li>

  </ul>

</body>

</html>



Any suggestions hints or tips on how to get this to work or make it simpler?

Thanks!
shingebis
Nervous Wreck (II) Inmate

From: UK
Insane since: Aug 2004

 posted posted 12-07-2004 12:03

Your problem is that in the line

code:
document.getElementById(parentId).onmouseover	= function () { menu.showMenu(childId); };


childId is being evaluated at the time of executing the mouseover function - and by that time makeMenu has finished and childId is at the end of the loop. You can put the function body in a string, which is something like (I forget the exact syntax):

code:
new Function("menu.showMenu(" + childId + ");")


but I'd prefer to store childId as a property of the parent element, like so:

code:
document.getElementById(parentId).childId = childId;

document.getElementById(parentId).onmouseover	= function () { menu.showMenu(this.childId); };


(note: completely untested)
poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

 posted posted 12-07-2004 13:27

jjarman: " Any suggestions hints or tips on how to get this to work or make it simpler? "

Yeah, get rid of JavaScript and make a Pure CSS menu, sneak a peak at Listamatic 2. To the hell with bad browsers.

Otherwise you simply need to set the mouseover/mouseout event to the first level LI to reveal/hide the nested UL.
InI
Maniac (V) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

 posted posted 12-07-2004 14:13

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

 posted posted 12-07-2004 14:46

InI: Obviously Pure CSS Menu can be well degraded. And actually JavaScript is not, and shouldn't be for accessibility reasons, navigation. JavaScript is nothing more than an enhancement just like CSS.
jjarman
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2004

 posted posted 12-07-2004 18:19

Thanks POI! (and everyone who responed and helped!)

I am going with a purly css dropdown menu, with a ie conditionallly commented 4 line js to make ie mimic the hover on li's.

http://www.htmldog.com/articles/suckerfish/dropdowns/

Once again this list has come through!

Cheers,
Josh

« Backwards — Onwards »

Show Forum Drop Down Menu