Code won't execute in $(document).ready but will in developer console

Question

I have some code wrapped in $(document).ready(function(){ /*code*/ });, and all of it works fine, except for one line. The code above it works fine, the code below it works fine, I'm not getting any errors in my console.

$('.main-right.category').height( $('.footer').height() + $('.main-right.category').height() );

That doesn't fire. However, if I paste that exactly in the developer console and press enter after the page has loaded, it works. All of the elements exist at page load (meaning none are built dynamically via javascript). Same result in chrome, firefox, IE.

Any ideas?

edit: I should add that my css is loaded before my javascript, and I've done other CSS related tweaks in this same javascript file that have worked fine.

Also, if I console.log $('.main-right.category').height() and $('.footer').height() right above that line of code, they both give non-zero integer values like I'd expect.

Answer 1

The ready event fires when the DOM is ready to work with. It differs from the load event which fires when all assets (css, javascript, images, ...) are all loaded.

I guess that when you code runs, the elements you're trying to get the height does have an height calculated already so it seems nothing happens.

When you executed your code in the console, everything is loaded so the behavior is the one expected.

To bind to the load event, check the method .load().

Answer 2

$(document).ready fires when the DOM-structure is full available, at this time the rendering ususally isn't finished, so the dimensions of the elements may be unknown and height() will return wrong values.

Use $(window).load() instead.