Jquery calculate height difference between .ready and .resize -

there seems difference in height calculation when initializing page or resizing page.

anyone has clue why? or how fix it?

example code

$(document).ready(function () {      showcase_height_init();      $(window).resize(function() {         showcase_height_init();     });  });  function showcase_height_init() {      var showcase_container_text_height = ($("#showcase_container_text").height())/2;      $("#showcase_container_text").css({         margin: '-'+showcase_container_text_height+'px 0 0'     });  } 

the "ready" event triggered dom available therefore possible attributes style, images , other resources aren't loaded , height of element don't real.

for purpose should try:

$("body").load(function () {      showcase_height_init();      $(window).resize(function() {         showcase_height_init();     });  });  function showcase_height_init() {      var showcase_container_text_height = ($("#showcase_container_text").height())/2;      $("#showcase_container_text").css({         margin: '-'+showcase_container_text_height+'px 0 0'     });  } 

i recommend jquery's documentation:

http://api.jquery.com/ready/