Oct 022009

When you’re writing a rich Internet application (RIA) in HTML and JavaScript, sometimes you need to programatically place a DOM element relative to the right or bottom edge of the visible browser window. For example, if you want to popup a help balloon near an item of interest, you probably want to make sure that the balloon is fully visible on the screen – not hanging off the edge of the screen, partially obscured.  I haven’t found a CSS way to accomplish that, but here are some tidbits I have found:

A quick web search on calculating browser window height reveals that different browsers have different ways to find the browser’s window client height.  In Netscape / Mozilla browsers, you can use window.innerHeight.  For IE, some sources suggest using document.body.offsetHeight, but I’ve found this falls short when the HTML content does not completely fill the browser window.  document.documentElement.clientHeight returns the actual window client height in IE.

The jQuery JavaScript library has some handy functions for calculating an element’s pixel location and pixel width and height, with or without consideration for borders, padding and margin.  $(“.myclass”).outerHeight() will give you the pixel height of the first element with a CSS class of “myclass”, including borders and margins.

$(“body”).outerHeight() returns the same value as document.body.offsetHeight, which will be less than the window height in a short HTML document and could be much larger than client height in a scrolling window.