Question

Possible Duplicate:
window.onload vs document.ready jquery

i am having this problem: i have an image on the page which is not that big one. and i have a js function which sets the left sidebar height dynamically depending on the height of the content and on the size of window. so if i resize the page, the sidebar resizes also dynamically. but now, the sidebar height is being set very early, ending up being set incorrectly. the setting will happen in “`document.ready“ function which should fire after all DOM is ready including images, right?

here is my page, please open this in chrome, you will see the issue more clearly.
http://www.stahlbaron.de/standort/

and here is my js function which sets the sidebar dynamically.

<script type="text/javascript">
   var calculateSize = function () {
   var winh = document.body.clientHeight;
   var footer = document.getElementById('footer').offsetHeight;
   document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
   document.getElementById('sidebar').style.marginBottom = footer + 'px';
}
$(document).ready(function(){
   calculateSize();
   $(window).resize(calculateSize);
});

thanks for any view and your time!

Answer 1

You should trap on $(window).on('load', ...) rather than $(document).ready.

The former waits for images (and all other content) to load while the latter only waits for the DOM tree representing the elements that are in the HTML source to be created.

Since you want the same function to be called when you resize, you can combine the event registrations:

$(window).on('load resize', calculateSize);