jquery conditional statement help

[suede1976]

Hi, I am trying to get a div to be the size of the browser window, but not if the content area is bigger than the window.

here is what i have so far

$ (function(){
var winHeight = $(window).height();
var contHeight = $('.content').css('height');
$('#maincontent').css('height', winHeight);
console.log(contHeight);
});

the vars bring back the right info. how would i set up an if statement that says. if contHeight > winHeight then this:

$('#maincontent').css('height', contHeight);

[astupidname]

A couple possibilities for you, although I don't know exactly what the values being returned for winHeight or contHeight contain. I assume they are just numbers and don't include units such as 'px' as in '122px' or anything (I'm certain winHeight would not contain units, just unsure about contHeight) in which case if they are just numbers the Math.max alternatives should be just fine too as that will select the higher number (the alternative, of course, is Math.min() which would select the lower of the two numbers):

$ (function(){
var winHeight = $(window).height();
var contHeight = $('.content').css('height');
if (contHeight > winHeight) {
$('#maincontent').css('height', contHeight);
} else {
$('#maincontent').css('height', winHeight);
}
console.log(contHeight);

});

Or a possible alternative (no 'if' statement required, let Math get what is needed):

$ (function(){
var winHeight = $(window).height();
var contHeight = $('.content').css('height');

$('#maincontent').css('height', Math.max(winHeight,contHeight));
console.log(contHeight);
});

Or even cleaner maybe:

$ (function(){
$('#maincontent').css('height', Math.max($(window).height(),$('.content').css('height')));
});

Of course, which version will depend also on whether you use those var's anywhere's else, if not, the last version should suffice.

[suede1976]

Holy crap it worked!

Thanks dood, I had too add some more variables but mathMax eventually worked. here is the final JS.

$ (function(){
var winHeight = $(window).height();
var contHeight = $('.content').css('height');
var uom = contHeight.slice(-2);
var num = parseFloat(contHeight, 10);
var contFin = num + 25;

$('#maincontent').css('height', Math.max(winHeight,contFin) + uom);

});

I needed to add 25 because of some padding. but thanks for the help! Now my divs will extend all the way to the bottom when the content doesn't fit. but if javascript is disabled i'm screwed...

[astupidname]

Your'e welcome!

but if javascript is disabled i'm screwed...

Yeah, I was going to comment before that I thought what you were up to was wrong (fixing faulty layout with javascript). Might be time for you to take a trip to the css forum here! (You probably won't see me there, javascript is easier!) :)