Wednesday, April 1, 2009

Javascript Get Page Height With Scroll

This javascript return width and height of a web page including the scroll.
function getSizeWithScroll()
{
if (window.innerHeight && window.scrollMaxY!=undefined)
{
// Firefox
yWithScroll = window.innerHeight + window.scrollMaxY;
xWithScroll = window.innerWidth + window.scrollMaxX;
}
else
{
var body = document.body;
if (body && body.parentElement=null&&body.parentElement.clientHeight)
{
height = body.parentElement.clientHeight;
htmlheight = body.parentElement.scrollHeight;
width = body.parentElement.clientWidth;
htmlwidth = body.parentElement.scrollWidth;
yWithScroll = height>htmlheight?height:htmlheight;
xWithScroll = height>htmlheight?width:htmlwidth;
}
else
if (body && body.clientHeight)
{
height = body.clientHeight;
htmlheight = body.scrollHeight;
width = body.clientWidth;
htmlwidth = body.scrollWidth;
yWithScroll = height>htmlheight?height:htmlheight;
xWithScroll = height>htmlheight?width:htmlwidth;
}
}
arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);
//alert( 'The height is ' + yWithScroll + ' and the width is ' + xWithScroll );
return arrayPageSizeWithScroll;
}

There is another option using JQuery:
$(window).width(); //width without scroll
$(window).height(); //height without scroll
$(document).width(); //width with scroll
$(document).height();//height with scroll