Проблема JavaScript с IE - PullRequest
Новая
       11

Проблема JavaScript с IE

1 голос
/ 05 марта 2010

Я создал сайт около 6 месяцев назад и с помощью jQuery создал меню с некоторой интерактивностью. Он отлично работал в моих друзьях (Firefox, Safari и т. Д.).

Оказывается, теперь IE7 и 8 не играют в мяч.

Ошибка в IE указывает на jQuery (на CDN Google) с invalid argument.

Страницу можно посмотреть здесь . Наведите курсор на верхние заголовки, чтобы увидеть, что должно произойти в Firefox. Это не происходит в IE7 / 8.

Вот исходный код моего эффекта 

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!

        });


    }



}

Я попробовал обычных подозреваемых и попробовал инструменты для разработчиков IE8, но пока не понял этого. Итак, я обращаюсь к сообществу Stack Overflow:)

Кто-нибудь знает проблему?

Ответы [ 2 ]

4 голосов
/ 05 марта 2010

Ошибка в этой строке в IE 8: 

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

Переменная sliderLeft никогда не инициализируется, потому что currentListItemIndex равен 0: 

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

>> currentListItemIndex
0

>> sliderLeft
undefined

Обновлено

IE 8 имеет действительно хороший встроенный отладчик (наконец-то):

  1. Убедитесь, что он не отключен, перейдя в Tools -> Advanced и отменив проверкуОпция «Отключить отладку сценариев (Internet Explorer)».

  2. Когда браузер обнаружит ошибку на странице, вы получите диалоговое окно с вопросом, хотите ли вы запустить отладчик.Убедитесь, что установлен флажок «Использовать встроенный отладчик сценариев в Internet Explorer».Нажмите «Да», чтобы запустить отладчик.

  3. Часто код jQuery будет выдавать ошибку при передаче неожиданного значения.Первоначально это не очень полезно, потому что проблема редко является ошибкой jQuery и большую часть времени код минимизируется в любом случае.Вам нужно будет выбрать вкладку «Стек вызовов» в отладчике, а затем следить за вызовами вверх по стеку, пока не дойдете до своего кода, вызвавшего проблему.Вот как мне удалось найти точную строку в вашем скрипте.

  4. Вы можете использовать вкладки Console, Locals и Watch для запуска какого-либо скрипта или просмотра текущего состояния используемых переменных.в данный момент произошла ошибка (например, переменные currentListItemIndex и sliderLeft).

0 голосов
/ 05 марта 2010

Вы используете jQuery 1.3.1, более старую версию jQuery, и, возможно, решите эту проблему, добавив последнюю версию jQuery.

...