Need Help with this Javascript

FencesWindows · #1 (**permalink**) Aug 8th, 2005, 03:19

hello,

Can anyone tell me what i am doing wrong with this code. I'm trying to make a 'suckerfish dropdown menu' as mentioned in this article: http://www.alistapart.com/articles/dropdowns/ Thanks for the help..

Code: Select all

 
/*HTML*/
<script>
			startList = function() 
			{
				if (document.all&&document.getElementById)
				{
					navRoot = document.getElementById("nav");
					
					for (i=0; i<navRoot.childNodes.length; i++) 
					{
						node = navRoot.childNodes[i];
						if (node.nodeName=="li")
						{
							node.onmouseover=function() 
							{
								this.className+="over";
							}
				 
							node.onmouseout=function() 
							{
								this.className=this.className.replace("over", "");
							}
						}
					}
				 }
			}
			
			window.onload=startList;
		</script>
		
	
	</head>

	<body  lang="en-US" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >

		Skip to main content

		<div id="container">
		<div id="header">
			<div class="center">
				[img]images/logo-545.jpg[/img]
			</div>
			[img]images/bluelinebg.jpg[/img]
		</div>
		
		<div id="navigationPanel">
			<ul>
	
						[*]About eWorld Learning
	
						[*]Educational Consulting Services
						
						<li class="over">Cross-Cultural Services
							<ul id="nav">
								[*]For Corporations
								[*]For Online Universities
								[*]For International Development
								[*]For Instructional Designers
							[/list]						
						
						[*]Accessibility in E-Learning
						
						[*]E-Project Management
						
						<li class="over">Resources
							<ul id="nav">
								[*]Globalized E-Learning Cultural Challenges
								[*]Publications
								[*]Cross-Cultural Information
							[/list]						
						
						[*]Home
	
			[/list]		</div>

/*CSS*/
li ul {display: none;} 
li:hover ul, li.over ul{ display: block; }

Webforumz Staff · #2 (**permalink**) Aug 8th, 2005, 06:34

I don't see anything obvious, it would help to know what it is or isn't doing though. Getting any errors? Got the page up somewhere?

benbacardi · #3 (**permalink**) Aug 8th, 2005, 07:38

aha i see your problem...

you have id="nav" on the lists that you want to drop down... this needs to be removed from them, and added to the main <ul> that encircles the whole list...

you also need to remove class="over" from two of the[*]...

you should have this instead...

Code: Select all

<div id="navigationPanel">
         <ul id="nav">
   [*]About eWorld Learning
   [*]Educational Consulting Services
                  [*]Cross-Cultural Services
                     <ul>[*]For Corporations[*]For Online Universities[*]For International Development[*]For Instructional Designers[/list]                  
                  [*]Accessibility in E-Learning
                  [*]E-Project Management
                  [*]Resources
                     <ul>[*]Globalized E-Learning Cultural Challenges[*]Publications[*]Cross-Cultural Information[/list]                  
                  [*]Home
   [/list]      </div>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
php and javascript	yvettesio	JavaScript Forum	8	Mar 14th, 2007 23:18
JavaScript	cbrams9	JavaScript Forum	1	Sep 20th, 2006 17:35
using xml in javascript	shailu	JavaScript Forum	0	Jul 25th, 2006 07:36
Can someone help me with this javascript	Galaxyblue	JavaScript Forum	2	Mar 11th, 2004 12:18
what does \\ mean in javascript	jenjen1018	JavaScript Forum	5	Jan 6th, 2004 17:05

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Need Help with this Javascript