Issue Getting Suckerfish Dropdown Menu Working in IE6

Discussion in 'Javascript' started by Ste, Sep 9, 2007.

  1. Ste

    Ste Guest

    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>
    Ste, Sep 9, 2007
    #1
    1. Advertising

  2. 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.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>
    ...
    </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
    Thomas 'PointedEars' Lahn, Sep 9, 2007
    #2
    1. Advertising

  3. Ste

    Ste Guest

    On 2007-09-09 22:32:50 +0100, Thomas 'PointedEars' Lahn
    <> 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/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);"
    > >

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


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

    >> <snip>

    >
    > PointedEars


    Thanks,

    Ste
    Ste, Sep 10, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Neo Geshel
    Replies:
    81
    Views:
    2,882
    diecleartype
    Jul 10, 2006
  2. Victoria Clare
    Replies:
    1
    Views:
    1,715
    Peter Mount
    Aug 16, 2004
  3. Neo Geshel
    Replies:
    6
    Views:
    484
    Neo Geshel
    Oct 24, 2004
  4. Richard
    Replies:
    10
    Views:
    862
    Steve Pugh
    Mar 4, 2005
  5. the idiot

    suckerfish elastic width thing

    the idiot, Sep 21, 2005, in forum: HTML
    Replies:
    3
    Views:
    551
    the idiot
    Sep 22, 2005
Loading...

Share This Page