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.

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.

• javascript
• jquery

• No errors in the console? Can you post a link to the page? – James Hill Commented Feb 21, 2012 at 20:19
• 1 Without the rest of the code, the only thing I can think of is that the DOM element that you are targeting has not been loaded in the DOM at the time this statement is executed. By the time you get to the console of course its there and this statement works. – Juan Ayala Commented Feb 21, 2012 at 20:19
• Sure it does nothing? Try fixing some humongous values on the sum of heights and try. – Alfabravo Commented Feb 21, 2012 at 20:25

4 Answers 4

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().

$(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.

i usually set height with:

var height = $('.footer').height() + $('.main-right.category').height();
$('.main-right.category').css('height',height+'px');

You should use the console to debug the selectors and view the heights of the elements;

$(document).ready(function() {

  var $footer = $('.footer');
  var $category = ('.main-right.category');

  console.log($category, $footer);
  console.log($category.height(), $footer.height());
  console.log('New height =', ($category.height() + $footer.height()));

});