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.A0 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.A0
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.A0 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;
A0
function getSize() {
A0 if( typeof( window.innerWidth ) == 'number' )
A0 {
A0A0A0 //Non-IE
A0A0A0 isIE = false;
A0A0A0 browserWidth = window.innerWidth;
A0A0A0 browserHeight = window.innerHeight;
A0 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
A0A0A0 //IE 6+ in 'standards compliant mode'
A0A0A0 browserWidth = document.documentElement.clientWidth;
A0A0A0 browserHeight = document.documentElement.clientHeight;
A0 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
A0A0A0 alert("You are using an outdated browser. Please upgrade to IE7 or FireFox 2.0");
A0A0A0 //IE 4 compatible
A0A0A0 browserWidth = document.body.clientWidth;
A0A0A0 browserHeight = document.body.clientHeight;
A0 }
}
A0
function updateMapSize()
{
A0A0A0 //IE7 is 21 pixels LESS than FireFox.
A0A0A0 //Pretty much we want to keep the map to the maximum size alloted.
A0A0A0 getSize();
A0A0A0 //Side bar is 200px, but we should take some px off of it for padding.
A0A0A0 //header is 80px hight. take some px off for padding.
A0A0A0 var mapWidth;
A0A0A0 if(document.getElementById("aToggleSideBar").className == "collapse")
A0A0A0 {
A0A0A0A0A0A0A0A0A0A0A0 mapWidth = browserWidth - 290;
A0A0A0 }
A0A0A0 else
A0A0A0 {
A0A0A0A0A0A0A0A0A0A0A0 mapWidth = browserWidth - 50;
A0A0A0 }
A0
A0A0A0 var mapHeight = browserHeight - 60;
A0A0A0 var sideBarHeight = browserHeight - 60;
A0
A0A0A0 document.getElementById("map").style.width = mapWidth + "px";
A0A0A0 document.getElementById("leftSide").style.width = mapWidth + "px";
A0A0A0 document.getElementById("map").style.height = mapHeight + "px";
A0A0A0 document.getElementById("rightSide").style.height = sideBarHeight + "px";
A0A0A0 document.getElementById("sideBar").style.height = (sideBarHeight - 50)+ "px";
A0
A0A0A0 setTimeout("updateMapSize()", 250);
A0
}