CODEWITHSUNDEEP
javascriptjquery
user1801105
user1801105

Reputation: 221

Use JQuery to resize container based on window size

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...

Upvotes: 4

Views: 4813

Answers (2)

Huangism
Huangism

Reputation: 16438

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

Upvotes: 1

reknirt
reknirt

Reputation: 2254

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

});

Upvotes: 0

Related Questions