views:

535

answers:

1

I am using the Superfish menu plugin for jQuery to display a vertical menu on some pages. I am also using the Supersubs.js plugin to make sure each level in the menu system is as wide as the widest LI element.

I have taken the EXAMPLE.HTML file that is included in the download zip file and simply added the prototype.js library to the source.

As to be expected FF, Chrome, Safari all render the menu correctly and use the supersubs plugin to make sure each level of the menu is at least as wide as the widest element.

And then there is IE.....

As soon as you include the Prototype.js library on the page IE ignores the Supersubs plugin.

Here is the example.html source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
<head>
    <title>A very basic Superfish menu example</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="js/hoverIntent.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/supersubs.js"></script>
    <script type="text/javascript">

       //jQuery.noConflict();

    // initialise plugins
        jQuery(function() {
            jQuery('ul.sf-menu').supersubs({
                minWidth: 12,
                maxWidth: 30,
                extraWidth: 2
            }).superfish();
        });

    </script>
</head>
<body>
    <ul class="sf-menu sf-vertical">
        <li class="current">
            <a href="#a">menu item</a>
            <ul>
                <li>
                    <a href="#aa">menu item that is quite long</a>
                </li>
                <li class="current">
                    <a href="#ab">menu item</a>
                    <ul>
                        <li class="current"><a href="#">menu item</a></li>
                        <li><a href="#aba">menu item</a></li>
                        <li><a href="#abb">menu item</a></li>
                        <li><a href="#abc">menu item</a></li>
                        <li><a href="#abd">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">menu item</a>
        </li>
        <li>
            <a href="#">menu item</a>
            <ul>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                        <li><a href="#">short</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu item</a>
                    <ul>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">menu item</a>
        </li>   
    </ul>

</body>
</html>

I have tried jQuery.noConflict(). I have changed the source in the plugin files to use jQuery instead of $ even though they use the format of (function($) {})(jQuery); and that shouldn't matter.

Can anyone help with this? Bout to pull my hair out.

Thanks in advance!

A: 

Look for instances within the plugin that have variable name the same as class names or ids such as

menu = $('#menu');

and instead do a

var menu = $('#menu');

This is a shot in the dark but whenever I have IE only bugs I look for this when using Prototype.js.

Christian
Hey Christian. Thanks for the reply. I will take a look into that. It almost seems that something in the Prototype library causes IE8 to go into quirks mode or something. I lose the "Compatibility Mode" button when all the JavaScript files that I mention are present together.If I use the Developer Toolbar with IE8 and force the browser into IE7 rendering mode everything works as it is expected to. No errors. I put it back into IE8 rendering mode and no joy. Completely frustrating.
Daniel P