Use JQuery to resize container based on window size

Question

I am trying to have a container div resize based on the dimensions of the window. The height to width ratio is the most important aspect here and I want to maximize the size of the container in whichever direction (height or width) that is most constraining given the ratio. I have tried a few things unsuccessfully with this being the most recent:

$(window).load(function() {
    var h = $(window).height();
    var w = $(window).width();

    If((h/w)>0.61){
        $('#container').css({'height': h, 'width':h*1.64}); }
        else{ $('#container').css({'height': w/1.64, 'width':w}); }
})

What do I need to change to get the window to resize? Is there a better way to approach this?

Thanks in advance for any assistance. I am not at all familiar with javascript/JQuery and have been unable to find any useful info... this thing is driving me nuts...

What do you need? Keep a container filling the entire screen? — Fred Wuerges, Nov 05 '12 at 21:09
Sorry I didn't do a very good job explaining the ratio bit. My div needs to be roughly 3/5 height/width and be as large as possible in any given window without scrollbars. Height or width could be the limiting dimension depending on the shape of the window. If the window is 600px H by 1200px W then the height is the limiting factor and the div should be 600px H and 984px W (600*1.64). If the window is 600px square then the width is the limiting factor and the div should be 600px W and 366px H. I want the size of the div to be set on load and I'll need to reset it on resize. Thanks! — user1801105, Nov 05 '12 at 21:27

score 1 · Answer 1 · answered Nov 05 '12 at 21:04

You want to capture the resize event, so assuming your current code works to your likings

$(document).ready(function() {
    $(window).resize(function() {
        var h = $(window).height();
        var w = $(window).width();

        if((h/w)>0.61) {
            $('#container').css({'height': h, 'width':h*1.64});
        }
        else { 
            $('#container').css({'height': w/1.64, 'width':w});
        }
    });

});

And let's avoid the capital I on the if

score 0 · Answer 2 · answered Nov 05 '12 at 21:01

I typically use this:

function resize () {
var w = $(window);
var containerWrap = $('#container-wrap');
containerWrap.css({ width:w.width(), height:w.height()});

}

I'm not sure if that answers your ratio question.

EDIT:

This may be more helpful:

$(document).ready(function () {
var missionWrap = $('#mission-wrap');
var w = $(window);
w.on('load resize',function() {
    missionWrap.css({ width:w.width(), height:w.height()});
});

});

Use JQuery to resize container based on window size

2 Answers2