Monday, August 30, 2010

Calculate page size and viewport position

Basically every browser except Internet Explorer agrees where the dimensions information is located. Can’t say that I’m particularly surprised, Microsoft has made it their mission to complicate these things.
For a nice visual list of available properties and browser support check out the W3C DOM CSS Object Model Compatibility article on QuirksMode. It’s a very nice list of many useful properties and methods as well as a chart of what browsers support them and how effective their support is.

View port dimensions

I found three possible objects that contain the view port size information. In most browsers the self object has the properties of innerWidth and innerHeight. However Internet Explorer has two other objects, IE6 keeps this information in the document.documentElement object and all new IEs use thedocument.body object. These objects have a clientWidth and clientHeight property.

Document dimensions

Once again, I found three different ways to get the document measurements. Most browsers agree that this information is stored in the document.body object. However Firefox’s best measurement of total document height seems to be window.innerHeight + window.scrollMaxY. The rest of the browsers respond to the scrollWidth/scrollHeight or offsetWidth/offsetHeight.

Scroll offset

Last but not least is the scroll offset, and again three different possible locations for this information. The general consensus is that scroll offset can be found in the pageYOffset and pageXOffset properties of the self or window objects. However IE uses scrollTop and scrollLeft properties on thedocument.body or document.documentElement objects.

No comments: