Full Screen web pages and browser resizing - keeping it looking good
I've noticed one thing that really gets some web developers going (and not the good going): Keeping a full screen web site looking good with different browser sizes. Those that know CSS inside-out will also have this problem as sometimes you just can't cut it with pure CSS. This is why many sites us a set width - they have clear control over everything with just CSS. However, those that like to employ full screen web pages need to do a bit more.
Note* this is only an issue with <div> based layouts. Table based layouts (die die die) don't have this.
Most Web Applications nowadays are full screen web apps - If they are not you should really re-think your design. I always develop my web apps for 800x600, but always allow them to work at resolutions like 1600x1050 (my resolution).
I have a simple JavaScript function I use whenever I write full page web apps that have a lot of content areas that I need specifically sized. here's a sample of my script that I am using for a program using mapping. This script runs every 250ms (4 times a second) and resizes my map width/Height and my sidebar height to take in the full height of the browser. My application never has any scrolling - except my right sidebar (overflow:auto;). This allows my application to remain clean of scrollbars and stay as large as possible for those using it.
var browserWidth = 0;
var browserHeight = 0;
function getSize() {
if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
isIE = false;
browserWidth = window.innerWidth;
browserHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
alert("You are using an outdated browser. Please upgrade to IE7 or FireFox 2.0");
//IE 4 compatible
browserWidth = document.body.clientWidth;
browserHeight = document.body.clientHeight;
}
}
function updateMapSize()
{
//IE7 is 21 pixels LESS than FireFox.
//Pretty much we want to keep the map to the maximum size alloted.
getSize();
//Side bar is 200px, but we should take some px off of it for padding.
//header is 80px hight. take some px off for padding.
var mapWidth;
if(document.getElementById("aToggleSideBar").className == "collapse")
{
mapWidth = browserWidth - 290;
}
else
{
mapWidth = browserWidth - 50;
}
var mapHeight = browserHeight - 60;
var sideBarHeight = browserHeight - 60;
document.getElementById("map").style.width = mapWidth + "px";
document.getElementById("leftSide").style.width = mapWidth + "px";
document.getElementById("map").style.height = mapHeight + "px";
document.getElementById("rightSide").style.height = sideBarHeight + "px";
document.getElementById("sideBar").style.height = (sideBarHeight - 50)+ "px";
setTimeout("updateMapSize()", 250);
}