Issue Getting Suckerfish Dropdown Menu Working in IE6

[Ste]

Hi there,

I'm having a few issues getting a 'Son of Suckerfish' dropdown menu
working in IE6 so am just posting here for some help please.

Here's the article I was using:
http://www.htmldog.com/articles/suckerfish/dropdowns/

And here's the exact example my menu is derived from:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/

In this menu, there's a piece of JavaScript which makes the dropdown
menu work in IE6, but my 'edited' example doesn't work in IE6, see
here: http://www.beta.zestimages.com

I think the issue is that in the working example in the article, the
'nav' ID is in the <ul> element, whereas I've coded my menu so that the
'nav2' ID is in the <div> that surrounds the <ul>. If that is indeed
the issue?

If I'm correct about why the JavaScript isn't working, can anyone tell
me how it can be adapted so that it works? To make this easier, I've
copied and pasted the JavaScript below.

Alternatively, if anyone can recommend a dropdown menu that can be
styled similarly to how I've styled this, but with the potential to
work better, I'd be happy to take a look and try that instead.

Many thanks,

Ste


<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

 

[Thomas 'PointedEars' Lahn]

I'm having a few issues getting a 'Son of Suckerfish' dropdown menu
working in IE6 so am just posting here for some help please.

Here's the article I was using:
http://www.htmldog.com/articles/suckerfish/dropdowns/

And here's the exact example my menu is derived from:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
[...]
<script type="text/javascript"><!--//--><![CDATA[//><!--

This is madness. I know the explanation for it, but that is inherently
flawed: there is no working HTML user agent that displays `script' element
content, so nothing needs to be commented out. Especially not when that
`script' element is placed within the `head' element.

The `script' element is supported since HTML 3.2, which is by definition
a snapshot of current practice at the time of publication (1997-01-14),
and HTML 2.0-only user agents went out of fashion long ago, with HTML 2.0
eventually being obsoleted by RFC2854 in June 2000.

And XHTML should not be served to HTML user agents.

sfHover = function() {

sfHover should be declared as a variable:

var sfHover = ...

var sfEls = document.getElementById("nav2").getElementsByTagName("LI");

This requires support for the Web standards W3C DOM Level 2 Core and HTML.

for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {

This requires support for a proprietary property on a host object.

this.className+=" sfhover";

This renders the `class' attribute value to be of an unwise format if it did
not contain a CSS class name before.

http://www.w3.org/TR/html4/struct/global.html#adef-class
http://www.w3.org/TR/html4/types.html#type-cdata

}
sfEls.onmouseout=function() {

This also requires support for a proprietary property on a host object.

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

Using the RegExp constructor is unnecessary here. Due to DOM history, the
user agents that would not support Regular Expression literals instead would
also not support the `className' property.

http://PointedEars.de/scripts/es-matrix

The Regular Expression used also is not compliant to CSS 2(.1), which
allows characters outside the range [a-zA-Z0-9_] to be contained in CSS
class identifiers:

http://www.w3.org/TR/CSS21/grammar.html#grammar

But those characters would be recognized as word delimiters by \b, see
ECMA-262 Ed. 3, 15.10.2.6.

}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

if (/\b(function|object)\b/i.test(typeof document.body.attachEvent)
&& document.body.attachEvent)

would be a much better feature test.

The Suckerfish approach also ignores that the `mouseover' and the `mouseout'
events bubble in all common DOMs, including the MSHTML DOM. So generally
the following is possible, with using much less dependencies on both
proprietary properties and W3C DOM methods:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function handleMouseEvent(e)
{
var t = e.target || e.srcElement;
if (/li/i.test(t.tagName))
{
switch (e.type)
{
case "mouseover":
t.className += (!t.className ? "" : " ") + "sfhover";
break;

case "mouseout":
t.className = this.className.replace(
/(\S\s+)?sfhover(\s+\S)?/, "$1$2");
break;
}
}
}
</script>
</head>

<body>
<ul
onmouseover="if (typeof event != "undefined") handleMouseEvent(event);"
onmouseout="if (typeof event != "undefined") handleMouseEvent(event);"...
</ul>
...

//--><!]]></script>

This is madness, too.


PointedEars

 

[Ste]

I'm having a few issues getting a 'Son of Suckerfish' dropdown menu
working in IE6 so am just posting here for some help please.

Here's the article I was using:
http://www.htmldog.com/articles/suckerfish/dropdowns/

And here's the exact example my menu is derived from:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
[...]
<script type="text/javascript"><!--//--><![CDATA[//><!--

This is madness. I know the explanation for it, but that is inherently
flawed: there is no working HTML user agent that displays `script' element
content, so nothing needs to be commented out. Especially not when that
`script' element is placed within the `head' element.

<snip>

I'll be honest and say that all of the above snipped comments went
completely over my head! I know very little JavaScript which is why I
was posting here. I think you should email your comments to the author
as I think it's quite a popular site and any improvements to the code
would be well received I'm sure.

The Suckerfish approach also ignores that the `mouseover' and the `mouseout'
events bubble in all common DOMs, including the MSHTML DOM. So generally
the following is possible, with using much less dependencies on both
proprietary properties and W3C DOM methods:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function handleMouseEvent(e)
{
var t = e.target || e.srcElement;
if (/li/i.test(t.tagName))
{
switch (e.type)
{
case "mouseover":
t.className += (!t.className ? "" : " ") + "sfhover";
break;

case "mouseout":
t.className = this.className.replace(
/(\S\s+)?sfhover(\s+\S)?/, "$1$2");
break;
}
}
}
</script>

Sorry for being dumb, but is the above code your suggested replacement
for the Son of Suckerfish script code that I am currently using? If
so, does that just need copying and pasting straight in, or do I have
to change className and tagName, for example?

</head>

<body>
<ul
onmouseover="if (typeof event != "undefined") handleMouseEvent(event);"
onmouseout="if (typeof event != "undefined") handleMouseEvent(event);"



PointedEars

Thanks,

Ste