Alex Rivera | Logout

Change Height based on Browser Size/Resize

Asked 2009-05-08T03:40:09.353
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.

javascript jquery browser screen
Edit
Report

2 Answers

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);
}
answered 2009-07-27T08:09:02.367
4

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

answered 2012-09-03T12:53:43.787

Your Answer