Hi all,
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
+21
A:
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.
TM
2009-05-08 03:47:32
Thanks i'll give it a try.
AlteredConcept
2009-05-08 03:49:53
$(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
2010-01-21 23:35:30
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
2010-07-12 21:10:27
+14
A:
$(function(){
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
$("#elementToResize").css('height',(h < 1024 || w < 768) ? 500 : 400);
});
});
Scrollbars etc have an effect on the window size so you may want to tweak to desired size.
Chad Grant
2009-05-08 04:00:39
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
2010-04-11 01:14:17
+4
A:
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 < 1024 || w < 768) ? 500 : 400);
}
Muhimbi
2009-07-27 08:09:02
or the top two lines could be written as one...$(window).resize(resizeFrame).resize();
Oskar Austegard
2010-01-21 23:36:33
A:
I have the feeling that the check should be different
new: h < 768 || w < 1024
lordspace
2009-11-06 15:15:27