How can I get the current document area size in javascript in IE, Firefox, Webkit?

Question

I need cross-browser compatible Javascript code that will return me the height and width of the current document area in all three browsers (IE, Firefox, Webkit [Chrome/Safari]). I don't need the entire window size (as it is on the desktop) but the height and width of the document as it pertains to CSS layout.

Thanks

score 1 · Answer 1 · answered Oct 07 '09 at 18:17

How about this:

// Calc visible screen bounds (this code is common)
var w = 0, h = 0;
if (typeof(window.innerWidth) === 'number') {// не msie
    w = window.innerWidth;
    h = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
}
var sx = 0, sy = 0;
if (typeof window.pageYOffset === 'number') {
    sx = window.pageXOffset;
    sy = window.pageYOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    sx = document.body.scrollLeft;
    sy = document.body.scrollTop;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    sx = document.documentElement.scrollLeft;
    sy = document.documentElement.scrollTop;
}
var winHeight = h + sy;
var winWidth = w + sx;

score 0 · Accepted Answer · answered Oct 14 '09 at 17:56

0

Actually what I needed was much easier...

function getDocumentWidth() {   
    return document.documentElement.offsetWidth;
}

function getDocumentHeight() {
    return document.documentElement.offsetHeight;
}

answered Oct 14 '09 at 17:56

dotnetengineer

1,254
1
9
18

score 0 · Answer 3 · answered Oct 17 '11 at 06:18

This is from some other site, which I forgot the actually, but, full credit to whom it belongs, not me. Here it is:

function f_clientWidth()
        {
            return f_filterResults(
                        window.innerWidth ? window.innerWidth : 0,
                        document.documentElement ? document.documentElement.clientWidth : 0,
                        document.body ? document.body.clientWidth : 0
                    );
        }

        function f_clientHeight()
        {
            return f_filterResults
                    (
                        window.innerHeight ? window.innerHeight : 0,
                        document.documentElement ? document.documentElement.clientHeight : 0,
                        document.body ? document.body.clientHeight : 0
                    );
        }

        function f_scrollLeft()
        {
            return f_filterResults
                    (
                        window.pageXOffset ? window.pageXOffset : 0,
                        document.documentElement ? document.documentElement.scrollLeft : 0,
                        document.body ? document.body.scrollLeft : 0
                    );
        }

        function f_scrollTop()
        {
            return f_filterResults
                    (
                        window.pageYOffset ? window.pageYOffset : 0,
                        document.documentElement ? document.documentElement.scrollTop : 0,
                        document.body ? document.body.scrollTop : 0
                    );
        }

        function f_filterResults(n_win, n_docel, n_body)
        {
            var n_result = n_win ? n_win : 0;

            if(n_docel && (!n_result || (n_result > n_docel)))
            {
                n_result = n_docel;
            }

            return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
        }

Usage is simple:

For width, call: f_clientWidth(), and so on...

I believe the source of it is : http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html, but I might be wrong. — HoLyVieR, Oct 18 '11 at 02:22
yeah @HoLyVieR, u r right :) below is d source 4 above post...full credit to the author: http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html — Nitin Bansal, Oct 18 '11 at 16:49

score -1 · Answer 4 · edited May 23 '17 at 12:04

off the top of my head, would getting the height of the body work? with jQuery something like

$("body").css("height")

UPDATE: Assuming you are using jQuery ( why wouldn't you ;-) ) then this post answers the question by adding this to your css when using the above solution.

head { height: 100%; }
body { min-height: 100%; }

This should also work

$(window).height()

It will include the margins though, in case you're getting more height than you think you should be.

How can I get the current document area size in javascript in IE, Firefox, Webkit?

4 Answers4