jquery css height setting not functioning properly

Question

I'm trying to use some jQuery to set the left and right columns of my product and catalog pages (with a class of .columns) to the height of my #detail <div> which has some data pulled from a SQL database.

So, I am using this jQuery code:

$(document).ready(function() {

  detailHeight = $('#detail').css('height');
  columnHeight = detailHeight + 10;

  $('.columns').css('height', columnHeight 'px');

});

My page is here: http://www.marioplanet.com/product.asp?IDnum=1

For some reason, the heights are not coming out properly..

Any ideas as to why?

Thanks!

Answer 1

You have a typo here:

$('.columns').css('height', columnHeight 'px');

The + is missing:

$('.columns').css('height', columnHeight + 'px');

---

But, as pointed out by others, using the css() function to access the height of an element is wrong for your code as it returns and expects a string with a CSS unit after the numeric value. Therefore you're not really adding numbers but concatenating strings. That's why your code doesn't work.

To fix your code, use jQuery's convenience method height() for getting and setting the height of an element as a numeric value instead. Simply pass in your number as the argument when setting it:

  detailHeight = $('#detail').height();
  columnHeight = detailHeight + 10;

  $('.columns').height(columnHeight);

Answer 2

Have you tried .height() or even .attr("height")?

Answer 3

$(document).ready(function() {

  detailHeight = $('#detail').css('height'); // would return something like 25px...
  columnHeight = detailHeight + 10; // 25px + 10 == ??

  $('.columns').css('height', columnHeight + 'px'); // ===>> .css('height', '25px10' + 'px');

});

suggestion,

$(document).ready(function() {

  detailHeight = $('#detail').height(); // use .height()
  columnHeight = detailHeight + 10; 

  $('.columns').css('height', columnHeight + 'px');

});

Answer 4

As everyone has mentioned the missing '+' symbol in the last statement, but when I ran alert() on the variable columnHeight (using my example) it showed 20px10. I wrapped detailHeight inside a parseInt() and it worked.

HTML Snippet

<div id="detail" style="background:#aaa;">HELLO</div>
<div id="x" class="columns" style="background:#f00;">HELLO</div>

JS Snippet

$(document).ready(function() {
  detailHeight = $('#detail').css('height');
  columnHeight = parseInt(detailHeight) + 10;

  $('.columns').css('height', columnHeight+'px');
});