JavaScript problem with IE

Question

I built a site about 6 months ago now and designed a menu with some interactivity using jQuery. It worked great in my friends (Firefox, Safari, etc).

Turns out that now IE7 & 8 are not playing ball.

The error in IE points to jQuery (on Google's CDN) with invalid argument.

The page can be viewed here. Move your mouse over the top headers to see what should happen in Firefox. This isn't happening in IE7/8.

Here is the source code of my effect

String.prototype.safe = function() {
    var string = this;
    string = string.toLowerCase().replace(/\s/g, '-');
    string = string.replace(/&/g, 'and'); // & appears as just &
    return string;
}

var subMenu = {
    activeMenuId: 'submenu-about-us',
    hideDelay: null,
    init: function(){
        var self = this;
        $('#header').append('<div id="sub-menu"></div><div id="hover"></div>');
        $('#background-elements').append('<span></span>');

        var $subMenu = $('#sub-menu');
        var $hover = $('#hover');

        $('#menu li ul').each(function(){
            var id = 'submenu-' + $(this).parents('li').find('.inner').text().safe();
            $(this).attr({
                id: id
            }).prependTo($subMenu);
        });

        // move slider to where it should be

        var uri = document.location.pathname;

        uri = uri.replace(PATH_BASE + '/', '')

        var uriSegments = uri.split('/');

        var currentCategory = uriSegments[0];

        if (currentCategory) {

            var uriSegmentToListIndex = {};

            uriSegmentToListIndex['about-us'] = 0;
            uriSegmentToListIndex['tenant-advice-and-advocacy'] = 1;
            uriSegmentToListIndex['housing-services'] = 2;
            uriSegmentToListIndex['tenants'] = 3;
            uriSegmentToListIndex['applicants'] = 4;
            uriSegmentToListIndex['housing-development-projects'] = 5;
            uriSegmentToListIndex['news-and-publications'] = 6;
            uriSegmentToListIndex['contact'] = 7;

            var currentListItemIndex = uriSegmentToListIndex[currentCategory];

            var sliderDropShadowOffset = 14;

            if (currentListItemIndex) {

                var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset;
            }

            $hover.css({
                left: sliderLeft + 'px'
            });

            this.activeMenuId = 'submenu-' + currentCategory;

            // make the right sub menu appear

            $subMenu.find('ul').hide();
            $('#submenu-' + currentCategory).fadeIn(500);
        }




        $('#menu li .inner').parents('li').hoverIntent(function(){

            var id = 'submenu-' + $(this).find('.inner').text().safe();

            if (id != self.activeMenuId) {

                self.activeMenuId = id;

                $subMenu.find('ul').hide();

                var newLeft = $(this).position().left + sliderDropShadowOffset; // offset for drop shadow



                $hover.animate({
                    left: newLeft + 'px'
                }, 500, function(){
                    $subMenu.find('ul').hide(); // sometimes some remain
                    $('#' + id).fadeIn(800);

                });

            }



        }, function(){
            // do nothing!

        });


    }



}

I've tried the usual suspects and had a go with IE8 developer tools, but have not figured this one out yet. So I'm turning to the Stack Overflow community :)

Anyone know the issue?

Answer 1

Hi, You are using jQuery 1.3.1, which is an older version of jQuery, and probably get this resolved by adding latest version of jQuery.

Answer 2

The error occurs in this line on IE 8:

$hover.css({
    left: sliderLeft + 'px'
});

The sliderLeft variable never gets initialized because currentListItemIndex is 0:

if (currentListItemIndex) {
    var sliderLeft = $('#menu > li:eq(' + currentListItemIndex + ')').position().left + sliderDropShadowOffset;
}

>> currentListItemIndex
0

>> sliderLeft
undefined

Updated

IE 8 has a really good built-in debugger (finally):

1. Make sure it's not disabled by going to Tools -> Advanced and un-checking the "Disable script debugging (Internet Explorer)" option.

2. When the browser hits the error on the page you will receive a dialog box asking if you want to run the debugger. Make sure the "Use the built-in script debugger in Internet Explorer" option is checked. Hit "Yes" to start the debugger.

3. A lot of times jQuery code will error out when passed an unexpected value. This isn't very helpful initially because the problem is rarely jQuery's fault and most of the time the code is minimized anyway. You will need to select the "Call Stack" tab in the debugger and then follow the calls up the stack until you reach your code that caused the problem. That's how I was able to find the exact line in your script.

4. You can use the Console, Locals and Watch tabs to run some script or view the current state of the variables being used at the moment the error occurred (like the currentListItemIndex and sliderLeft variables).