The Dynamic Duo - Using Browser Width/Height

Using Browser Width/Height

Even with the advent of the screen object, this can't be used reliably to determine the actual size of the browser window. It is important to know the exact width and height (to the pixel) of the browser to give us the ability to generate layers based on these values. We can use those value to generate layers that stretch to the width of the browser, center layers, or right align them etc., thus giving layers extra flexibility even though they are absolutely positioned.

The best way that I know to find the width/height of the browser is by checking the following properties after the BODY tag. You must place whatever code that is dependent on the width/height in SCRIPT located after the body because in IE the body element is used:

In Netscape:

window.innerWidth
window.innerHeight

In IE:

document.body.scrollWidth
document.body.scrollHeight

However, these values don't take into consideration the scrollbar. Usually you'll only be concerned about the vertical scrollbar, so you can manually account for it by subtracting 20 from the width in IE, and 16 in Netscape (Netscape excludes the chrome window border). The following is the template I use:

<BODY>

<SCRIPT LANGUAGE="JavaScript">

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (ns4)? window.innerHeight : document.body.offsetHeight

// write out the layers accordingly using the CSS function....
writeCSS(
css('mylayer',0,0,winW,winH,'black') // one big black square
)

</SCRIPT>

<!-- other HTML elements go here -->

<div id="mylayer"></div>

</BODY>

Note: this is the only situation where you should ever have to write CSS within the body.

At any time after the winW and winH variables have been defined can they be used (eg. init() function can use them)

Centering Layers

To use these values to center a layer you can do a little math to find where the left/top co-ordinate should be. For example if your layer is 100px wide and 50px tall, you'll need to use the (winW-100)/2 for the left coordinate, and (winH-50)/2 for the top coordinate.

And that translated into code is:

writeCSS (
css('centerDiv',(winW-100)/2,(winH-50)/2,100,50,'blue')
)

You can do similar statements to align a layer to the right or bottom of the screen. The following example places layers in all four corners and the center of the screen.

Netscape Resize Fix Function

// Netscape Resize Fix
if (document.layers) {
	widthCheck = window.innerWidth
	heightCheck = window.innerHeight
	window.onResize = resizeFix
}
function resizeFix() {
	if (widthCheck != window.innerWidth || heightCheck != window.innerHeight)
	document.location.href = document.location.href
}

This piece of code can be inserted into pages which suffer the common problem when you resize the Netscape browser, all your layers loose their positioning. That code will reload the page, again using the browser width and height to check if the size has changed.

Source Code

resizefix.js

Liquid Layout Effect

(a derivative of the resize fix function)

A common practice amongst Table-lovers is to use 100% widths everywhere to make the page stretch to fill with width of the browser. Well, us DHTML-lovers can do that too. Just use the winW and winH variables as described above, and add the Liquid Effect JavaScript file to your page (along with the CSS Function):

<script language="JavaScript" src="../dynapi/css.js"></script>
<script language="JavaScript" src="../dynapi/liquid.js"></script>

That file contains the findWH() function which you may use to find the winW and winH properties. However those properties have been tweaked so that when you draw layers they will fit *exactly* to the width and height of the window - not including the scrollbars or anything.

The real trick with making the page liquid is that the page must reload in order for all the layers to be redrawn (to keep the layers stretched). What you do is add the onResize event to the body tag:

<body bgcolor="#FFFFFF" onResize="makeLiquid()">

And presto, your page will reload when resized, and therefore redraw all the layers to their desired positions and dimensions.

Liquid Demos:

Example: liquid1.html [source] - for a simple liquid effect example.

Example: liquid2.html [source] - for a liquid checker board layout.

Source Code

liquid.js