jQuery conditional problem

Question

I am trying to create a conditional statement on my dynamic product pages on my website, to aid the setting of the height of my columns (both left and right) and the center part (the #detail <div>).

I have this bit of code now:

$(window).load(function() {

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

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

});

Now, I want to make sure that the height of the columnHeight variable is at least 550, so that the height of the columns and the #detail <div> will be at least 550px tall.

This is due to my Mario artwork with him placing a call on the right-hand column. It looks a little unprofessional if it overhangs into the footer.

I'm trying to add a conditional:

if($(columnHeight) < 550) {
    columnHeight = 550;
}

To my previous code like this:

$(window).load(function() {

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

  if($(columnHeight) < 550) {
      columnHeight = 550;
  }

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

});

For some reason, it loads the same as if the conditional weren't even there.

You can view the effects of the problem here at:

http://www.marioplanet.com/catalog.asp and clicking through to any of the products,

or,

by going to http://www.marioplanet.com/product.asp?IDnum=1 and by changing the number in the IDnum=1 in the last part of the URL to anything in between 1 and 45.

Any suggestions are greatly appreciated!

Thanks!!

UPDATE:

Thanks to everyone who posted!

Wow, what a lame mistake!!

Answer 1

Do you mean to include the $ in front of columnHeight?

if($(columnHeight) < 550) {
    columnHeight = 550;
}

should be:

if(columnHeight < 550) {
    columnHeight = 550;
}

You are wrapping a number into a jQuery object. I actually have no idea of what this would be expected to achieve!

Answer 2

Try:

if(columnHeight < 550) {
     columnHeight = 550;
}

Answer 3

Not sure why you're jQuery-fying the columnHeight. Give this a shot:

$(window).load(function() {

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

  if(columnHeight < 550) {
      columnHeight = 550;
  }

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

});

Answer 4

Shouldn't that be...

if(columnHeight < 550) {
    columnHeight = 550;  
}

...as your example is trying to create a jQuery object from a simple variable?

Answer 5

Can't you just use the CSS min-height property on .columns and #detail?

.columns, #detail {
    min-height: 550px;
}