Is it possible to re-size a div's height with the browser window using JavaScript or jQuery getting the windows object dimensions and creating a function?
Add a comment
|
2 Answers
You can bind to the resize event to well... re-size your element:
//bind event handler to the `resize` event
$(window).on('resize', function () {
//cache the window object for use in this function
var $this = $(this);
//set the height of my object to the height of the window
$('#my-object').height($this.height());
//trigger a window resize to initialize the object's height
}).trigger('resize');
$this refers to the window object.
Note that .on() is new in jQuery 1.7 and replaces the depreciated .bind() in this instance.
Comments
Here is a crossbrowser solution:
DEMO
I divided the result by 'two' to make the effect more visible at window resize:
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
$('#box').height($.getDocHeight()/2 );
$(window).resize(function(){
$('#box').height($.getDocHeight()/2 );
});
You can just use:
$('#box').height($.getDocHeight);
Hope this helps - Happy coding!
Comments
