43

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.

Improve this question
1
  • Note that the size specified here (1024x768) sounds like a screen resolution rather than a browser size. I would think that if you're thinking to check a browser then you should use a somewhat small size such as 1000x700 to account for the borders, menu, toolbars, and status bar.
    – Alexis Wilke
    Commented Jul 2, 2012 at 1:40

5 Answers 5

Reset to default
68

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.

Improve this answer
3
  • 9
    $(document).height() is seriously unreliable, resulting in a lower value for a full-screened browser than in one that is ALMOST full screen. $(window).height() and width() seem to be safer. In any case, you're probably more interested in intent than in an exact value, so adding a reasonable buffer to account for the difference between $(window).height and the outer size of the browser window may be what you'll want.
    – Oskar Austegard
    Commented Jan 21, 2010 at 23:35
  • 1
    Thanks for mentioning the jQuery version number. I was working on a file that used an older version and kept getting "e.style is undefined" in FireBug when I tried to get $(window).width. Maybe the next person who Googles that error will find this answer. :)
    – Nathan Long
    Commented Jul 12, 2010 at 21:10
  • is there any advantage using this over window.resizeTo( w,h ) ??
    – Xitcod13
    Commented May 12, 2012 at 20:57
47 
$(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.

Improve this answer
1
  • 4
    Don't you have the (h < 1024 || w < 768) ? 500 : 400 backwards? I believe the question was to have it 400 for smaller than 1024x768. Also, as another poster mentions, checking height and width against wrong values. So, s/b .css('height', (h < 768 || w < 1024) ? 400 : 500);
    – Mikezx6r
    Commented Apr 11, 2010 at 1:14
25

Building on Chad's answer, you also want to add that function to the onload event to ensure it is resized when the page loads as well.

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var h = $(window).height();
    var w = $(window).width();
    $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
}
Improve this answer
1
  • 4
    or the top two lines could be written as one... $(window).resize(resizeFrame).resize();
    – Oskar Austegard
    Commented Jan 21, 2010 at 23:36
4

Pay attention, there is a bug with Jquery 1.8.0, $(window).height() returns the all document height !

Improve this answer
2

I have the feeling that the check should be different

new: h < 768 || w < 1024

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.