CODEWITHSUNDEEP
javascriptjquerycross-browser
chuwy
chuwy

Reputation: 6679

Weird JQuery behaviour in case of reloading page

I have a "magic line" in my site's navigation (it's slides under hovered menu element and stay there if I'm on that URL already).

$(function() {
    var $el, leftPos, newWidth, $mainNav = $("#menu");

    $mainNav.append("<li id='magic-line'></li>"); // line with position
                                                    // absolute
    var $magicLine = $("#magic-line");
    // initialization
    if ($('.selected')[0].id == 'logo') { // we're on the main page
        $magicLine.width(1) // just hide
        .css({
            "left" : 100
        }).data("origLeft", 100).data("origWidth", 1);
    } else { // we're on the not-main page
        off = parseInt($('#menu > .selected').css('padding-left').slice(0, -2));
        leftPos = $("#menu > .selected").position().left + off;
        $magicLine.width($(".selected").width()) // stay under the menu
                                                    // element
        .css("left", leftPos).data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width())
    }

    $("#menu > .nav-item").hover(function() { // go under the menu element
        $el = $(this);
        newWidth = $el.width();
        off = parseInt($el.css('padding-left').slice(0, -2));
        leftPos = $el.position().left + off;
        $magicLine.stop().animate({
            left : leftPos,
            width : newWidth
        }, 200);
    }, function() {
        $magicLine.stop().animate({
            left : $magicLine.data("origLeft"),
            width : $magicLine.data("origWidth")
        }, 200);
    });
});

And I detected some weird behaviour. It's slightly different in each browser, but trend is the same: when I click on menu element - it go to the proper position (let's say left 260px), I can click again and again, but it's still there. But when I press F5 (or just typing the url) it's appear in slightly different position (left 256px). So, I click on the same element and it's again on proper position. And if I won't stop it can drastically change and after F5 appear on proper position.

So what is the reason this behavior? Is it saves state somehow? What is the difference between F5 and just clicking? Only cause that I see at this moment is my django development webserver which is fully synchronously, slow and non-caching, but I can't check it on production server.

Upvotes: 0

Views: 197

Answers (1)

chuwy
chuwy

Reputation: 6679

So, the problem was in custom fonts used in menu (@font-face) and the related width. If font is changed to one from the safe list (Arial, Verdana) it's rendered and behaves as I expect, but when custom typeface is used it's collapses. By the way, the browser's JS console gave me this warning: "Resource interpreted as Font but transferred with MIME type application/x-font-otf", but I don't sure whether it related to the problem somehow.

And my solution is simply declare the width for each element, so browser can render it correctly from outset.

Upvotes: 1

Related Questions