Do something when screen resolution changes with jQuery

I want to set height of a div as height of window when page loads...

So I used the below code :

 $(document).ready(function () {
            var x = screen.availWidth;
            var y1 = screen.availHeight;
            var y2 = screen.Height;
            var w = $(window).height();
            var d = $(document).height();
            alert('availHeight : ' + y1);
            alert('Height : ' + y2);
            alert('window : ' + w);
            alert('document : ' + d);
            $('#OuterDiv').css({ 'height': w });
            //alert($('#OuterDiv').cs开发者_如何学Gos('height'));
        });   //End Of $(document).reedy

Problem #1:

When screen resolution changes that div still have previous height.

How can I fix that ?

Problem #2:

I want height=100% for that div and because of some css problems I used jQuery.

But when page is loading (during page load) that div's height is the height of it's content and after that jQuery worked, that div gets window's height.

I think this is not nice during page load.

How can I fix this issue?

height:100% does not work for that div:

Here is the reason -> LINK

Thanks in advance

You can capture the resize event like so:

$(window).resize(function() {
    alert($(window).width());
    alert($(window).height());
});

If you want to resize straight away, take the script out of the ready event, and put it inline, directly below your div (and maybe call it again on ready as well)

E.g.

<div class="myDiv">Content</div>
<script>$('#myDiv').height($(window).height());</script>

Is there any reason you can't just use CSS? If you set the width and height of your body to 100% and position your div absolutely, you should achieve the same effect.

Here's the jQuery event you're looking for, which sets #box to the width and height of the window

$(document).ready(function() {
    var resizeBox = function() {
        $('#jq').css({width: $(window).width(), height: $(window).height()});
    };
    resizeBox();
    $(window).resize(resizeBox);
});

Here's an example at http://jsfiddle.net/JxWm9/4/ which includes a CSS box for comparison. Note the JS version lags because it's based on the resize event, while the CSS resize is native to the browser itself.