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