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

Question

Я испытываю странную проблему со своей навигацией по лампе лавы. Он адаптирован после урока Джеффри Вей по лампам. Код для лавовой лампы находится внизу. Проблемы появляются в основном в 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); 

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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 создан, тело 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, будут правильными.