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!

BoltClock · Accepted Answer · 2010-09-20 04:40:21Z

8

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);

edited Sep 20, 2010 at 4:40

answered Sep 20, 2010 at 4:17

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Robert Over a year ago

This, in addition the the fact that the columnHeight variable is 20px10px when passed in that function.

Qcom Over a year ago

Thanks guys! Is there any reason that the heights still seem to be semi-skewed? Thanks again so much, how could I forget such a wonderful method??? :D

BoltClock Over a year ago

@BOSS: what do you mean by semi-skewed? The columns look fine to me, unless you're referring to the icons where I do see a bit of an offset.

Qcom Over a year ago

Check out this (marioplanet.com/product.asp?IDnum=1) product. Why is there spill on the #detail <div>? The columns do look great though.

BoltClock Over a year ago

@BOSS: what browser are you testing on?

|

griegs · Accepted Answer · 2010-09-20 04:19:31Z

1

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

answered Sep 20, 2010 at 4:19

griegs

22.8k33 gold badges132 silver badges208 bronze badges

1 Comment

BoltClock Over a year ago

attr("height") doesn't work because height isn't an HTML attribute.

Reigel Gallarde · Accepted Answer · 2010-09-20 04:20:58Z

1

$(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');

});

answered Sep 20, 2010 at 4:20

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Comments

T.P. · Accepted Answer · 2010-09-20 04:29:10Z

1

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');
});

answered Sep 20, 2010 at 4:29

T.P.

3,0051 gold badge24 silver badges20 bronze badges

Collectives™ on Stack Overflow

jquery css height setting not functioning properly

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related