Scripting for 5th Generation Browsers and Beyond

Capturing Browser Dimensions

Let's get back to positioning our layers by browser dimensions. You will note that instead of assigning a numeric value to the left and top attributes of the new layer object, page_width and page_height are used. These are variables created and set at the onLoad event handler:

onLoad="
if(is.ns6) {
page_width=innerWidth;
page_height=innerHeight;
layerSetup();
} else if(is.ie5 || is.ie55||is.ie6) {
page_width=document.body.clientWidth;
page_height=document.body.clientHeight;
layerSetup();
}"

Once again we need to create a little cross browser and backward compatible DOM switch. Netscape 4 and Netscape 6 use innerWidth and innerHeight to detect a user's screen resolution. Therefore, we create a browser detection condition.

if(is.ns6) {

if this condition holds true then the variables page_width and page_height are assigned the correct DOM method for Netscape 6 and the layerSetup() script is triggered.

page_width=innerWidth;
page_height=innerHeight;
layerSetup();

If the condition is not true then attention is focused on the Internet Explorer part of the script and the DOM for those browsers is utilized.

} else if(is.ie5 || is.ie55 || is.ie6) {
page_width=document.body.clientWidth;
page_height=document.body.clientHeight;
layerSetup();
}"