Forum Moderators: open
I am creating a navbar. When a link is clicked, a subnav should become visible. I have put alerts in my code to check that it is running. The alerts are working but the divs aren't hidding or showing. Can someone please take a look.
Thanks.
Helen.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calverton Nav Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
TD{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #0000cc;
}
A{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #0000cc;
text-decoration: none;
}
A:Hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #0000cc;
text-decoration: underline;
}
-->
</style>
<script language="JavaScript">
<!--
function hideallonload() {
// hide all the divs
document.getElementById('SchoolInfoLinks').style.visibility = 'hidden';
document.getElementById('ProfessionalsLinks').style.visibility = 'hidden';
document.getElementById('PupilsLinks').style.visibility = 'hidden';
alert('Hide All Complete!');
}
function show_div(div_id) {
// hide all the divs
document.getElementById('SchoolInfoLinks').style.visibility = 'hidden';
document.getElementById('ProfessionalsLinks').style.visibility = 'hidden';
document.getElementById('PupilsLinks').style.visibility = 'hidden';
// show the requested div
document.getElementById(div_id).style.visibility = 'visible';
alert('Hide All And Show ' + div_id + ' Complete!');
}
-->
</script>
</head>
<body onload="hideallonload()">
<!-- Copy and paste text below this line -->
<table width="160" border="0" cellspacing="1" cellpadding="3" bgcolor="#0000cc">
<tr>
<td bgcolor="#ffff99" align="center">
<strong><a href="/">Home</a></strong>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" align="center">
<strong><a href="/contact.htm">Contact Us</a></strong>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" align="center">
<strong><a href="#" onclick="show_div('SchoolInfoLinks'); return false;">School Information</a></strong>
</td>
</tr>
<div id="SchoolInfoLinks" align="center">
<tr>
<td bgcolor="#ffffff" align="center">
<a href="termdates.htm">Term Dates</a><br />
<a href="policies.htm">Policies</a><br />
<a href="prospectus.htm">Prospectus</a><br />
<a href="calendar.htm">Calendar</a><br />
<a href="stafflist.htm">Staff List</a>
</td>
</tr>
</div>
<tr>
<td bgcolor="#ffff99" align="center">
<strong><a href="#" onclick="show_div('ProfessionalsLinks'); return false;">Professionals</a></strong>
</td>
</tr>
<div id="ProfessionalsLinks" align="center">
<tr>
<td bgcolor="#ffffff" align="center">
<a href="teachingdocs.htm">Teaching Documents</a>
</td>
</tr>
</div>
<tr>
<td bgcolor="#ffff99" align="center">
<strong><a href="#" onclick="show_div('PupilsLinks'); return false;">Pupils</a></strong>
</td>
</tr>
<div id="PupilsLinks" align="center">
<tr>
<td bgcolor="#ffffff" align="center">
<a href="trips.htm">Term Dates</a><br />
<a href="pupilswork.htm">Policies</a><br />
<a href="sportsresults.htm">Prospectus</a><br />
<a href="http://www.lgfl.net/lgfl/leas/newham/schools/calverton/" target="_blank">Calendar</a>
</td>
</tr>
</div>
</table>
<!-- Copy and paste text above this line -->
</body>
</html>
// Show/hide DIV
// Tested on IE, Opera, Netscape/Mozilla
function ToggleDiv(DivName)
{ with (document.getElementById(DivName).style) {
if (display == "none")
display = ""
else display = "none";
}}
From discussions in other threads, display:hidden might be better but I haven't tried that.
Kaled.
but still nothing happens.
Helen.
function showElements(show,names)
{ if (show) show = ''; else show = 'none';
var e;
for (var i = 1; i < arguments.length; i++) {
e = document.getElementById(arguments[i]);
if (e) e.style.display = show;
}
}
showElements(true,'name1','name2','name3');
Secondly, use either Opera or Firefox for testing javascript. If Firefox, open a javascript console manually. After each test, check for error messages in the console.
Kaled.
Thanks again but still, absolutly nothing is happening. No errors, nothing.
Chris.
[pre]
....*....
</tr>
[red]<div id="SchoolInfoLinks" align="center"> [/red]
<tr>
<td bgcolor="#ffffff" align="center">
<a href="termdates.htm">Term Dates</a><br />
<a href="policies.htm">Policies</a><br />
<a href="prospectus.htm">Prospectus</a><br />
<a href="calendar.htm">Calendar</a><br />
<a href="stafflist.htm">Staff List</a>
</td>
</tr>
[red]</div>[/red]
<tr>
....*....
[/pre]Get rid of those DIVs.
If each content section is a row, then use the id's on the rows instead.
Then use display = "block" / "none"
Works a charm. Now I just need to collapse the rows instead of hidding the content.
Helen
IMHO, this method of toggling isn't very efficient, and can lead to execution time problems when dealing with many objects.
Here's one of my rants on the subject...
