browser issue causing problem in dropdown feature

[Whitney]

On the left side of the main webpage I have some menu options that
have a drop-down feature that is controlled with javascript. You click
on the main heading and the links for that section show up. Click on
it again and they disappear. This works great in IE6 but doesn't seem
to work in Netscape 7.

I have included the main javascript code below, along with a sample of
the Menu code. What (if anything) do I need to tweak to get this to
work under Netscape?


javascript code:
<script language=JScript>
document.onclick = DropDownMenu;

function DropDownMenu() {
var LinkClicked, DivName, TargetDiv;

LinkClicked = window.event.srcElement;
if (LinkClicked.className == "Category") {
DivName = "Div_" + LinkClicked.id.substr(5,
LinkClicked.id.length);
TargetDiv = document.all(DivName);
if (TargetDiv.style.display == "")
TargetDiv.style.display = "none";
else
TargetDiv.style.display = "";
} // if
} // DropDownMenu
</script>

Sample of Menu item:
<ul>
<li><b><a id=Link_Memoriam class=Category href=#>In
Memoriam</a></b></li>
<div id=Div_Memoriam style="display:none">
<ul>
<li><a href="memoriam/DickPollitz.htm">Dick Pollitz</a></li>
</ul>
</div>
</ul>

 

[Grant Wagner]

On the left side of the main webpage I have some menu options that
have a drop-down feature that is controlled with javascript. You click
on the main heading and the links for that section show up. Click on
it again and they disappear. This works great in IE6 but doesn't seem
to work in Netscape 7.

I have included the main javascript code below, along with a sample of
the Menu code. What (if anything) do I need to tweak to get this to
work under Netscape?


javascript code:
<script language=JScript>

Netscape 7 doesn't support any language called "JScript". Use:

document.onclick = DropDownMenu;

function DropDownMenu() {
var LinkClicked, DivName, TargetDiv;

LinkClicked = window.event.srcElement;

Netscape 7 doesn't have an Event object attached to the default window
object. The event is passed as the first parameter to the function. Nor
does Netscape 7 have a "srcElement" property of the event, it has a
"target" property:

function DropDownMenu(e) {
var LinkClicked, DivName, TargetDiv;

LinkClicked = e ? e.target : window.event.srcElement;

if (LinkClicked.className == "Category") {
DivName = "Div_" + LinkClicked.id.substr(5,
LinkClicked.id.length);
TargetDiv = document.all(DivName);

Netscape 7 doesn't support document.all:

if (document.getElementById) { // NS6+, IE5.5+,Opera 7+
TargetDiv = document.getElementById(DivName);
} else if (document.all) { // IE4
TargetDiv = document.all(DivName);
}

if (TargetDiv.style.display == "")
TargetDiv.style.display = "none";
else
TargetDiv.style.display = "";
} // if
} // DropDownMenu
</script>

Sample of Menu item:
<ul>
<li><b><a id=Link_Memoriam class=Category href=#>In
Memoriam</a></b></li>
<div id=Div_Memoriam style="display:none">
<ul>
<li><a href="memoriam/DickPollitz.htm">Dick Pollitz</a></li>
</ul>
</div>
</ul>

With the changes indicated, I tested it in IE6SP1, Mozilla 1.5a and Opera
7.11 and it worked.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 6/7 and Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html