Recognize the body width and height

I need a little script which allows me to do this:

if(// window body Height is less then 660px) {
       // code to be executed if condition is true 
} 
else { 
      // code to be executed if condition is false 
}

Hope there is a simple solution for that!

EDIT:

I have this now:

$(document).ready(function(){  
                       
if(parseInt($('body').height())<660){
    $("#container").addClass("small");
}
else{
    $("#container").removeClass("small");
}
 });

But it's not working, anybody knows what I'm doing wrong开发者_Go百科?

if(parseInt($('body').height())<660){

}else{

}

i thought height() and width() will return integers but yea better parseInt for certainty.

if you don't want to use jquery

if(document.getElementsByTagName('body')[0].offsetHeight<660){

}else{

}

should work.

Here you go:

$( window ).resize(function () {
    $( container ).toggleClass( 'small', $( window ).height() < 660 );
}).triggerHandler( 'resize' );

where container is a reference to your #container element.

.triggerHandler() will manually fire the resize event (which in turn will execute the above resize handler), so the above code works both on re-size and on page load.

Just thought I would point this out for posterity. There may be some cases where you want the entire height of the (body) element, not just the height property. Use .outerHeight(true) to get that.

Note, have Firebug/Chrome Console open.

body {
  padding: 10px;
  margin: 25px;
}

<p>This is a test</p>

console.log($('body').height());
console.log($('body').outerHeight(true));

Which gives you:

20
90

http://jsfiddle.net/userdude/TS2Nn/

To get around this, you could use html:

console.log('html: '+$('html').height());
console.log('html: '+$('html').outerHeight(true));
console.log('body: '+$('body').height());
console.log('body: '+$('body').outerHeight(true));

Which will give you:

html: 90
html: 90
body: 20
body: 90

http://jsfiddle.net/userdude/TS2Nn/2/