Лава Лампа навигационная jQuery Firefox - PullRequest
Новая
       13

Лава Лампа навигационная jQuery Firefox

0 голосов
/ 22 августа 2011

Я испытываю странную проблему со своей навигацией по лампе лавы. Он адаптирован после учебника Джеффри Вея . Код для лавовой лампы находится внизу. Проблемы появляются в основном в Firefox (я использую FF6), но иногда также в Chrome и Safari (но не в IE9): оранжевая линия над пунктом меню иногда слишком длинная и слишком большая справа при загрузке страницы. Когда я наводю курсор на элемент, он центрируется над ним и остается там, как и должно быть с самого начала. Есть идеи, почему это происходит? Что-то странное с position (). Left и externalWidth ()? Обратная связь очень ценится! 

(function($) {
$.fn.spasticNav = function(options) {
    options = $.extend({
        speed: 500,
        reset: 1500,
        color: '#F29400',
        easing: 'easeOutExpo'
    }, options);

    return this.each(function() {

        var nav = $(this),
                currentPageItem = $('#active', nav),
                stroke,
                reset;

        $('<li id="stroke"></li>').css({
            width: currentPageItem.outerWidth(),
            height: 4,
            margin: 0,
            left: currentPageItem.position().left,
            top: currentPageItem.position().top,
            backgroundColor: options.color
        }).appendTo(this);
        stroke = $('#stroke', nav);

        $('a:not(#stroke)', nav).hover(function() {
                    // mouse over
                    clearTimeout(reset);
                    stroke.animate(
                            {
                                left : $(this).position().left,
                                width : $(this).width()

                            },
                            {
                                duration : options.speed,
                                easing : options.easing,
                                queue : false
                            }
                    );

                }, function() {
                    // mouse out
                    reset = setTimeout(function() {
                        stroke.animate({
                            width : currentPageItem.outerWidth(),
                            left : currentPageItem.position().left
                        }, options.speed)
                    }, options.reset);

                });
    });
};
})(jQuery);

Ответы [ 2 ]

1 голос
/ 13 февраля 2012

У меня была такая же проблема.

Проблема связана с точным моментом, когда браузер загружает шрифт:

IE загрузит файл .eot немедленно, когда встретит объявление @ font-face.

Gecko (то есть Firefox), Webkit и Opera все ждут, пока не встретят HTML, соответствующий правилу> CSS, с использованием шрифта, включая шрифт @ font-face.

Я полагаю, у вас есть объявление font-face в выражении тела CSS, которое применяется ко всей странице, и у вас есть выражение lavaLamp в событии jQuery (document) .ready () следующим образом: 

jQuery(document).ready(function() {
   jQuery('.ha-main-menu ul').lavaLamp({startItem: 3});
});

поэтому, когда плагин lavaLamp создан, body css по-прежнему не применяется, и вычисления о позиционировании по размеру неверны, они относятся к старому шрифту до применения font-face.

Как вы можете видеть в этом вопросе Как узнать, когда был применен font-face , одним из решений является вызов lavaLamp в событии onreadystatechange, ожидая, пока document.readystate === 'complete', в пути: 

document.onreadystatechange = function () {  
    if (document.readyState == "complete") {  
        jQuery('.ha-main-menu ul').lavaLamp({startItem: 3});
    }
}

Итак, lavaLamp запускается после загрузки font-face, поэтому методы size-position, используемые внутри плагина lavaLamp, будут правильными.

1 голос
/ 04 ноября 2011

У меня была такая же проблема. Попробуйте использовать трюк jquery: 

$(document).ready(function(){ bla bla bla });

или, если вы предпочитаете: 

$(window).load(function(){ bla bla bla });

Добавьте это перед функцией, в которой вы вызываете основной Java-скрипт меню Java, например: 

$(window).load(function(){$('#topmenu_ul').spasticNav();});
...