getWidth()- and getHeight() reloaded
recently handgestrickt found a function that gave us the width and height of the browser window. unfortunately this was just half the solution, because the real dimensions of the document with the scrollable area was not returned. after we did a long investigation on the internet we found an article on quirksmode.org that mentioned all available combinations of objects and properties to get the height of the window. some are with, some without the scrollable height. as we already expected, every browser does it slightly different. so we wrote 2 functions that test all possible values and take the widest or highest one:
<script language="JavaScript" type="text/javascript">
function winWidth() {
var result = 0;
if(document.body.clientWidth && result < document.body.clientWidth) result = document.body.clientWidth;
if(document.body.scrollWidth && result < document.body.scrollWidth) result = document.body.scrollWidth;
if(document.documentElement.scrollWidth && result < document.documentElement.scrollWidth) result = document.documentElement.scrollWidth;
if(document.documentElement.clientWidth && result < document.documentElement.clientWidth) result = document.documentElement.clientWidth;
if(document.documentElement.offsetWidth && result < document.documentElement.offsetWidth) result = document.documentElement.offsetWidth;
if(document.body.offsetWidth && result < document.body.offsetWidth) result = document.body.offsetWidth;
if(window.innerWidth && result < window.innerWidth) result = window.innerWidth;
return result;
};
function winHeight() {
var result = 0;
if(document.body.clientHeight && result < document.body.clientHeight) result = document.body.clientHeight;
if(document.body.scrollHeight && result < document.body.scrollHeight) result = document.body.scrollHeight;
if(document.documentElement.scrollHeight && result < document.documentElement.scrollHeight) result = document.documentElement.scrollHeight;
if(document.documentElement.clientHeight && result < document.documentElement.clientHeight) result = document.documentElement.clientHeight;
if(document.documentElement.offsetHeight && result < document.documentElement.offsetHeight) result = document.documentElement.offsetHeight;
if(document.body.offsetHeight && result < document.body.offsetHeight) result = document.body.offsetHeight;
if(window.innerHeight && result < window.innerHeight) result = window.innerHeight;
return result;
};
</script>related:
earlier post on 18. March 2007
