Re: Issue Getting Suckerfish Dropdown Menu Working in IE6
- From: Thomas 'PointedEars' Lahn <PointedEars@xxxxxx>
- Date: Sun, 09 Sep 2007 23:32:50 +0200
Ste wrote:
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[i].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[i].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>
...
</body>
//--><!]]></script>
This is madness, too.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
.
- Prev by Date: Re: how can I get plain text assigned through innerHTML to work as real Javascript? Should I use eval()?
- Next by Date: Re: create non-sidebar bookmarks in Firefox?
- Previous by thread: Re: variables not set
- Next by thread: FAQ Topic - How do I prompt a "Save As" dialog for an accepted mime type?
- Index(es):
Relevant Pages
|
