Sunday, 17 February 2013

How to resize a website dynamically as per the window size

Today I got some requirement to re-size the some website that should doesn't have scroll bar and need to adjust dynamically as per the window size.

To do that you need to do it JQuery or CSS. I am posting here how you will do it in JQuery.

Just put this script in the page which you want to adjust its size.

<script type="text/javascript">
    $(document).ready(function () {
        Resize();
    });
    

 $(window).resize(function () { Resize(); location.reload(true); }); // when the window get re-sized
   
    function Resize() {
        var height = window.innerHeight ? window.innerHeight : $(window).height();
        height = height - 96; // Height of the Logo and the Footer is 96px so it is deducted.
        $("#leftNav").height(height);
    }
</script>


Here i am concerned about the height. I you want to resize with width also you can use $(window).width().

Note: Be cautious if you are still want to work the code in IE7 the do remember the following things, you need to deduct the view port


    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 7) {
            viewportHeight -= 3;
        }
    }

    if($('#leftNav').height() > viewportHeight) {
        $('#leftNav').height($('#leftNav').height() - viewportHeight);
    }

    if($('#leftNav').height() < viewportHeight) {
        $('#leftNav').height(viewportHeight - $('#leftNav').height());
    }
 

No comments:

Post a Comment