Question

I have an index page animation that I designed with jQuery that is not consistently behaving the same(all pieces should be centered in a logical manner). It can be viewed at http://cspsolutions.ca/Maxxim . If you refresh it a couple times you will see it does not consistently end in the same spot in google chrome , yet works properly in all other browsers. To see this issue in chrome the page needs to be refreshed a few times. Any help would be greatly appreciated and the code is listed bellow for the .js file.

// JavaScript Document

$(document).ready(function() {

$(".intro-no-js").css("visibility","hidden");
$(".intro-javascript").css("visibility","visible");

//defines how max should be animated
jQuery.fn.maxanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 

    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t,
        left: l-79.5
    }, 1000);

    return this; 
} 


//defines how xim should be animated
jQuery.fn.ximanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 

    var r = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t,
        left: r+78.5
    }, 1000);

    return this; 
} 

//defines how top arrows should be animated
jQuery.fn.arrowsanimate = function () { 
this.css("position","absolute"); 

    var t = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        top: t-25,
        left: l
    }, 1000);

    return this; 
} 

//defines how bottom section should be animated
jQuery.fn.animatebottom = function () { 
this.css("position","absolute"); 

    var b = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop(); 
    var l = (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft(); 

    $(this).animate({
        bottom: b-27,
        left: l
    }, 1000);

    return this; 
}

//max starting co-ordinates
var maxl = $(window).width() - 157; 
var maxt =  ($(window).height() - $("#intro-max").outerHeight()) / 2; 

//xim starting co-ordinates
var ximr = $(window).width() - 159; 
var ximt = ($(window).height() - $("#intro-xim").outerHeight()) / 2; 

//arrows starting co-ordinates
var al = (($(window).width() -  $("#intro-xim").outerWidth()) / 2) + $(window).scrollLeft()+ 35; 
var at = 0; 

//bottom of logo starting co-ordinates
var bl = (($(window).width() -  $("#intro-xim").outerWidth()) / 2) + $(window).scrollLeft()-90;
var bt = 0;

//set initial co-ordinates for all divs
$("#intro-arrows").css({position: "absolute",top: at,left: al});    
$("#intro-max").css({position: "absolute",top: maxt,right: maxl});
$("#intro-xim").css({position: "absolute",top: ximt,left: ximr});
$(".intro-bottom").css({position: "absolute", bottom: bt, left: bl});

//lets bring it all to life!
$("#intro-max").maxanimate();
$("#intro-xim").ximanimate();
$("#intro-arrows").arrowsanimate();
$(".intro-bottom").animatebottom();

//refresh window if resized
$(window).bind('resize',function(){
 window.location.href = window.location.href;
});


$("#sales").click(function() { 
    window.location.href = "main.html?page=1&sel=1";  
}); 


$("#design").click(function() { 
    window.location.href = "main.html?page=2&sel=1";  
    return false;//Just in case if it is a link prevent default behavior 
}); 


});

Answer 1

The issue is that the elements, while they do exist in the DOM when the javascript is initially run, haven’t actually been rendered in the browser and thus do not have an actual width or height yet. The placement is off because you use outerWidth and outerHeight which are incorrectly returning 0 on page load.

An easy way to work around this is to not call the initial animations on $(document).ready but instead on $(window).load which fires after elements are rendered and images are downloaded.