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
– Fred Wuerges, Commented Nov 5, 2012 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
– user1801105, Commented Nov 5, 2012 at 21:27

Huangism · Accepted Answer · 2012-11-05 21:04:24Z

1

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

answered Nov 5, 2012 at 21:04

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

reknirt · Accepted Answer · 2012-11-05 21:01:58Z

0

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

});

answered Nov 5, 2012 at 21:01

reknirt

2,2645 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

Use JQuery to resize container based on window size

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related