Tuesday, June 5, 2007

Browser Dimensions and Document Scroll Offsets

Determining browser dimensions

IE: document.body.clientWidth & document.body.clientHeight
Firefox: window.innerWidth & window.innerHeight

<script type="text/javascript">

document.write("Your browser\'s dimensions are: ")
if (window.innerWidth) //if browser supports window.innerWidth
document.write(window.innerWidth+" by "+window.innerHeight)
else if (document.all) //else if browser supports document.all (IE 4+)
document.write(document.body.clientWidth+" by "+document.body.clientHeight)


Determining document scroll offset coordinates

IE: document.body.scrollLeft & document.body.scrollTop
Firefox: window.pageXOffset & window.pageYOffset
There is a pitfall on IE when you uses a doctype at the top of the page. The way to accessing the DSOC properties in IE6 changes, namely, from document.body to document.documentElement.

var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

var dsocleft=document.all? iebody.scrollLeft : pageXOffset
var dsoctop=document.all? iebody.scrollTop : pageYOffset


No comments:

Subscribe in a Reader