Question

I’ve written a little function to position a logo midway between the left hand side of the browser window and the (centered) navigation menu. The menu items are populated from a database, with the first item given the id item0.

function positionLogo(){
    var $menuleft=0;
    var $element=document.getElementById('item0');
    if ($element.offsetParent) {
        do {
            $menuleft+=$element.offsetLeft;
        } while ($element=$element.offsetParent);
    }
    var $logoleft=($menuleft/2)-130; // As logo is 260px wide
    if ($logoleft<0) {
        $logoleft=0;
    }
    $('#logo').css('left',$logoleft);
}

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

$(window).resize(function(){
    positionLogo();
});

This works fine when the window is resized, but when it first runs when the page is loaded, the position it sets is about 20px too far right (ie $logoleft is 20 more than it should be). As soon as the page is resized it jumps into the correct position.

Haven’t got it live anywhere at the moment but does anyone have any ideas? Thanks!

Answer 1

Replace this:

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

$(window).resize(function(){
    positionLogo();
});

With this:

$(window).bind('load resize', positionLogo);

You need the layout and all sizes to finish up (images loading, etc), so you want the window.load method instead of document.ready. Combine that with bind() taking space separated events and you can get it down into a simple one-line handler like that. One other note, no need to wrap only a function in function() { }, just put the function name like I have above 🙂