Tuesday, October 09, 2007

Extending content to the bottom of the window

Here's a nifty little bit of javascript that extends the content of a container (in this case, a td with id "shadow" and a div with id "contentarea") to the bottom of the browser window, regardless of the height of the window. The first function gets the height of the browser and the second function does the extending.

You can see it in action at http://www.equitiesfirst.com.

//Gets the height of the browser window
function getheight() {


var myHeight = 0;


if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}

//Extends the content to the bottom of the browser window

function adjustHeight()
{

if (document.getElementById) {
var targetElement=document.getElementById('shadow');

//extend the shadows
targetElement.style.height=String(getheight())+'px';

//extend the content area (minus the header area)
targetElement=document.getElementById('contentarea');
targetElement.style.height=String(getheight()-413)+'px';
}
}

window.onresize=adjustHeight;
window.onload=adjustHeight;

No comments: