Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Issue Getting Suckerfish Dropdown Menu Working in IE6

Reply
Thread Tools

Issue Getting Suckerfish Dropdown Menu Working in IE6

 
 
Ste
Guest
Posts: n/a
 
      09-09-2007
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/suck...downs/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").getElementsByTagNa me("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

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

 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      09-09-2007
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/suck...downs/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").getElementsByTagNa me("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/gl...tml#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
 
Reply With Quote
 
 
 
 
Ste
Guest
Posts: n/a
 
      09-10-2007
On 2007-09-09 22:32:50 +0100, Thomas 'PointedEars' Lahn
<(E-Mail Removed)> said:

> 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/suck...downs/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);"
> >

> ...
> </ul>
> ...
> </body>


Again, would the above just need pasing into the existing <ul> ? Or
would any other amendments be needed?

>> <snip>

>
> PointedEars


Thanks,

Ste

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Suckerfish CSS drop-down menu problem (major IE inconsistency!) Neo Geshel HTML 81 07-10-2006 02:34 AM
Values to change in suckerfish menu Richard HTML 10 03-04-2005 02:59 PM
Schizophrenic Internet Explorer - Suckerfish Drop-downs Neo Geshel HTML 6 10-24-2004 10:59 AM
Suckerfish & .js delay with IE - preload external .js? Victoria Clare HTML 1 08-16-2004 10:42 AM
Select dropdown box bleeds into Javascript dropdown menu Mike HTML 1 12-18-2003 09:49 PM



Advertisments