Jquery Change Height based on Browser Size/Resize

Question

I was wondering if there was a way to determine the height/width of a browser. What i'm trying to do is set a height on a div to 500px when the browser size is 1024x768, and for anything lower i'd like to set it to 400px.

Thanks in advance

Answer 1

If you are using jQuery 1.2 or newer, you can simply use these:

$(window).width(); $(document).width(); $(window).height(); $(document).height(); 

From there it is a simple matter to decide the height of your element.

Answer 2

$(function(){     $(window).resize(function(){         var h = $(window).height();         var w = $(window).width();         $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);     }); }); 

Scrollbars etc have an effect on the window size so you may want to tweak to desired size.