Java script bij css menu

Door Sander Spijk op 02-01-2006 23:52 gewijzigd op 03-01-2006 00:50

361 views

Hoi, op mijn site maak ik gebruik van 3 menus (algemeen, user en admin) die afhankelijk van de user en inloggegevens verschijnen. Nu heb ik nav een tutorial over css dropdown menus een dropdown menu gemaakt voor mijn site (eigenlijk dus 3 menus). Dit werkt in firefox erg goed, maar in IE niet, dit is een bekend probleem wat door de TUT opgelost werd met een script. Dit werkt echter bij mij alleen voor het eerst menu.

Ik zoek daarom een oplossing voor mijn 3 menus, de eerst heeft als ID "nav" mee gekregen, hoe herschrijf ik het script voor de andere 2 menus (nav2 en nav3)?

hieronder staat het 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;

S Sander Spijk

05-01-2006 21:50

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>-:: Swords and Ale - Dungeons and Dragons Log website ::-</title>
<link href="css_menu.css" rel="stylesheet" type="text/css">
<link href="css_tabs.css" rel="stylesheet" type="text/css">
<link href="css_style.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
<script type="text/javascript">
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", "");
}
}
}
}

if (document.all&&document.getElementById) {
navRoot2 = document.getElementById("nav2");
for (i=0; i<navRoot2.childNodes.length; i++) {
node = navRoot2.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}

if (document.all&&document.getElementById) {
navRoot3 = document.getElementById("nav3");
for (i=0; i<navRoot3.childNodes.length; i++) {
node = navRoot3.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><center>
<table class="bgtabel" width="900" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top">
<table class="topbanner" width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" background="pics/top1.gif">
 <a href="index.php?lan=en"><img src="pics/envlag.gif" width="23" height="14" border="0"></a>
<a href="index.php?lan=nl"><img src="pics/nlvlag.gif" width="23" height="14" border="0"></a><br>
<div class="usersonline">  | Registered Users: 9<br>  | Users Online: 0<br>  | Total visitors: 28<br>  | Pageviews: 605 </div>
</td>
<td width="150"><img src="pics/top2.gif" width="150" height="74"></td>
<td width="150"><img src="pics/top3.gif" width="150" height="74"></td>
<td width="150"><img src="pics/top4.gif" width="150" height="74"></td>
<td width="150"><img src="pics/top5.gif" width="150" height="74"></td>
<td width="150"><img src="pics/top6.gif" width="150" height="74"></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"><img src="pics/topmenu1.gif" width="15" height="25"></td>
<td background="pics/topmenu2.gif"> </td>
<td width="15"><img src="pics/topmenu3.gif" width="15" height="25"></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="150" valign="top">
<div class="menutop">
<ul>
<li>MAIN<strong>menu</strong></li>
</ul>
</div>
<ul id="nav">
<li><a href="http://dnd.jotaenschede.nl/">Home</a>
<ul>
<li><a href="http://dnd.jotaenschede.nl/phpBB2/memberlist.php">Memberlist</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">DnD Logs</a>
<ul>
<li><a href="#">Campaigns</a></li>
<li><a href="#">Adventures</a></li>
<li><a href="#">Characters</a></li>
</ul>
</li>
<li><a href="http://dnd.jotaenschede.nl/phpBB2/index.php">Forums</a></li>
</ul>
<div class="menutop">
<ul>
<li>LOGIN<strong>menu</strong></li>
</ul>
</div>
<table class="logintabel">
<tr>
<td align="right">
<form name="login" method="post" action="/index.php?">
Username:
<input type="text" size="8" name="loginusername"><br />
Password:
<input type="password" size="8" name="loginpassword"><br />
<input type="submit" name="login" value="Login" class="loginbutton">
</form></td>
</tr>
</table>
<ul>
<li><a href="phpBB2/profile.php?mode=register">Create an Account!</a></li>
</ul>
<div align="center">
<font face="Arial, Helvetica, sans-serif" color="#FF6600" size="-2">Best viewed with<br />
<a href="http://www.mozilla.com/firefox/"; target="_blank"><img src="pics/firefox.png" border="0" width="40" /></a><br />
Mozilla FireFox</font></div>

</td>

Jan Koehoorn

05-01-2006 21:51

Sander Spijk schreef op 05.01.2006 21:49
Dit is de code en de manier waarop die in het php bestand staat

De foutmelding is:
line: 35
Char: 11
Error: Object required
Code: 0
URL: http://dnd.jotaenschede.nl

Line 35 is volgens IE:
for (i=0; i<navRoot2.childNodes.length; i++) {

Char 11is dus de tweede i

Ja die foutmeldingen van IE heb je meestal geen fuck aan. Die i kun je gewoon zo gebruiken in een for loop. Het ligt meestal aan een foute verwijzing naar een variabele.

S Sander Spijk

05-01-2006 21:53

Ik kom net ergens achter. Als ik ingelogd ben en de andere twee menu's (nav2 en nav3) door php zichtbaar gemaakt worden is de foutmelding ook weg....

Conclusie:
Doordat nav2 en nav3 eruitgefilterd worden komt er een foutmelding.... want javascript vraagt om nav2 en nav3, maar die zijn tijdelijk net beschikbaar....

Is er een manier om dat eruit te halen?

S Sander Spijk

05-01-2006 21:54

om hets cript dus zo te mkaen dat als nav2 en nav3 er niet zijn (of alleen nav3 er niet is) dat hij daar ook niet om gaat zeuren?

Jan Koehoorn

05-01-2006 22:05

Ik heb even gekeken naar het gedeelte waarin je een functie toekent aan onmouseout. De manier waarop heb ik iets aangepast. Als je dat even doorvoert in de rest van je script dan kun je testen wat je dan krijgt. Hieronder een voorbeeldje:

for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
return (this.className+=" over");
}
node.onmouseout=function() {
return (this.className=this.className.replace(" over", ""));
}
}
}

S Sander Spijk

05-01-2006 22:14

Heb het script weer uit de hoofdpagina gehaald, en krijg met veranderingen nog steeds dezelfde foutmelding... misschien moet ik er gewoon een lege nav2 en nav3 in laten verschijnen op het moment dat de menu's niet getoond worden door php...

if(login etc){toon nav3}else{toon lege nav3}

zou dit misschien een oplossing izjn?

Jan Koehoorn

05-01-2006 22:15

Ik ben niet genoeg 'ingelezen' in je script, maar da's gewoon uitproberen.

S Sander Spijk

05-01-2006 22:20

Door het invoegen van:

else{ echo("<ul id=\"nav3\"></ul>"); }

Is het hele probleem opgelost...
Er zit alleen iets meer ruimte tussen het mainmenu en het loginschermpje

S Sander Spijk

05-01-2006 22:22

Allemaal bedankt voor het meedenken, misschien kan ik de volgende keer zelf eens beter nadenken....

Jan Koehoorn

05-01-2006 22:31

Amen :-) Mooi dat het werkt in ieder geval.

Reageren

Inloggen om te reageren