Lava Lamp navigation jQuery Firefox

问题:

I'm experiancing a weird problem with my lava lamp navigation. It's adapted after Jeffrey Way's Lava lamp tutorial. The code for the lava lamp is at the bottom. Problems appear mainly in firefox (I'm using FF6) but occationally also in Chrome and Safari (but not IE9): The orange line above the menu item sometimes is too long and too much to the right when a page is loaded. When I hover over the item then it centers over it and stays there like it should from the beginning. Any ideas why that happens? Something weird with position().left and outerWidth()? Feedback very appreciated!

(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); 

回答1:

I had the same issue. Try to use jquery trick:

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

or if you prefere:

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

Add this before the function where you call the main java script of the lava menu, like this:

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

回答2:

I had the same issue.

The problem is due to the exact moment in which the browser loads the font-face:

IE will download the .eot file immediately when it encounters the @font-face declaration.

Gecko (so, Firefox), Webkit, and Opera all wait until they encounter HTML that matches a >CSS rule with a fontstack including the @font-face font.

I suppose you have the font-face declaration in CSS body statement, aplying it to the entire page, and you have your lavaLamp statement in the jQuery(document).ready() event, in the way:

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

so, when lavaLamp plugin is created, body css is still not applied, and the calculations about size-positioning are wrong, they refer to old font, before font-face is applied.

As you can see in this question How to know when font-face has been applied , one solution is to call lavaLamp in event onreadystatechange, waiting until the document.readystate === 'complete', in the way:

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

so, lavaLamp is launched after the font-face is loaded, so the size-position methods used inside the lavaLamp plugin will be the correct ones.