Use jQuery to resize container based on window size

Question

I am trying to resize a container div depending on the size of the window. The ratio of height to width is the most important aspect here, and I want to maximize the size of the container in any direction (height or width) that most limits this ratio. I tried several things unsuccessfully when this was the very last:

$(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 resize the window? Is there a better way to approach this?

Thanks in advance for any help. I am completely new to javascript / jQuery and could not find any useful information ... this thing is driving me crazy ...

Answer 1

You want to capture a resize event, so if your current code works to your liking

 $(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 capital I on if

Answer 2

Try this link here ... It will show you how to resize and call a function, etc. http://api.jquery.com/resize/

Answer 3

check this post:

JavaScript window resize event

Welcome.

Answer 4

I usually use this:

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

}

I am not sure if this answers your question about the ratio.

EDIT:

This might be more useful:

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

});