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.

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, Jul 02 '12 at 01:40

score 68 · Accepted Answer · edited May 08 '09 at 03:55

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.

edited May 08 '09 at 03:55

alex

479,566
201
878
984

answered May 08 '09 at 03:47

TM.

108,298
33
122
127

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 Jan 21 '10 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 Jul 12 '10 at 21:10
is there any advantage using this over window.resizeTo( w,h ) ?? – Xitcod13 May 12 '12 at 20:57

score 47 · Answer 2 · edited Mar 20 '13 at 13:55

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.

edited Mar 20 '13 at 13:55

Gigala

143
2
10

answered May 08 '09 at 04:00

Chad Grant

44,326
9
65
80

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 Apr 11 '10 at 01:14

score 25 · Answer 3 · edited Mar 20 '13 at 13:54

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);
}

edited Mar 20 '13 at 13:54

Gigala

143
2
10

answered Jul 27 '09 at 08:09

Jeroen Ritmeijer

2,772
3
24
31

4

or the top two lines could be written as one... $(window).resize(resizeFrame).resize(); – Oskar Austegard Jan 21 '10 at 23:36

score 4 · Answer 4 · answered Sep 03 '12 at 12:53

4

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

answered Sep 03 '12 at 12:53

Thomas Decaux

21,738
2
113
124

score 2 · Answer 5 · answered Nov 06 '09 at 15:15

2

I have the feeling that the check should be different

new: h < 768 || w < 1024

answered Nov 06 '09 at 15:15

Svetoslav Marinov

1,498
14
11

Change Height based on Browser Size/Resize

5 Answers5

Linked