Question

I’m trying to align an element vertically with another by passing an offset. It lines up in Chrome, but FF / Safari are pushing it down further than it should be… example: http://campaignreport2012.rogerhutchings.co.uk/cinema-verite/

function headalign() {
    var original_offset = ( $("#header").offset() );
    var custom_offset_top = ( $(".wp-post-image").offset().top );
    var custom_offset_left = ( $("#header").offset().left );

    if ( $(window).width() > 768 ) {
        $("#maintitle").offset({
            top: custom_offset_top,
            left: custom_offset_left,
        });
    } else {
        $("#maintitle").offset( original_offset );
    }   

}

if ( $("body").hasClass("single") ) {
    headalign();
    $(window).resize(function() { headalign(); });
}

It recalculates it fine on resize, but it’s too far down on the first load. Can anyone help me out?

Answer 1

As a proper answer (instead of a comment):

Your javascript is executed immediately after the browser receives it. Depending on the position in the document of this script this happens even before the DOM is fully loaded.

$(document).ready(function(){ headalign(); }); would execute your function on DOM-load. But at this point neither the images nor the ‘BlockGothic’-font is rendered. Therefore custom_offset_top is 0 or some other value (no image, no custom font).

You need to wait until the page is fully rendered:

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

This leads to an initial flicker or jump down of your "#maintitle". You can kind of “fix” that hiding "#maintitle" in the first place and fading it in after the page is rendered:

css:

#maintitle {
    display: none;
}

javascript:

$(window).load(function(){
    headalign();
    $("#maintitle").fadeIn(200);
});

Hope this helped!