Cross-Browser Client Size, Encore

[Martin Rinehart]

Repeat of previous post, but this time the function works in standards
mode as well as in quirks mode.

I've checked the following pages on Konqi and Opera, KDE, and MSIE6,
7,
and recent FF, Chrome, Opera and Safari, Windows. It replaces the
absurdly complex FAQ 9.3 ( http://www.jibbering.com/faq/#getWindowSize
).

function clientSize() {
var d = document;
if ( d.clientHeight ) { return [d.clientWidth, d.clientHeight]; }
return [
Math.max( d.body.clientWidth, d.documentElement.clientWidth ),
Math.max( d.body.clientHeight,
d.documentElement.clientHeight ) ]
}

There is a quirks mode tester, here:

http://www.martinrinehart.com/examples/doc-elem.html

And there is a standards mode tester, here:

http://www.martinrinehart.com/examples/doc-elem-strict.html

I strongly encourage anyone who has solved other ugly bits of browser
incompatibilities to post similar solutions here, so that those who
come after may google for answers and not spend hours or days solving
problems unrelated to whatever they are trying to code.

 

[David Mark]

Repeat of previous post, but this time the function works in standards
mode as well as in quirks mode.

Well, that's progress.

I've checked the following pages on Konqi and Opera, KDE, and MSIE6,
7,
and recent FF, Chrome, Opera and Safari, Windows. It replaces the
absurdly complex FAQ 9.3 (http://www.jibbering.com/faq/#getWindowSize
).

You should really stop ragging on the example in the FAQ.

function clientSize() {
    var d = document;
    if ( d.clientHeight ) { return [d.clientWidth, d.clientHeight]; }
    return [
        Math.max( d.body.clientWidth, d.documentElement.clientWidth ),
        Math.max( d.body.clientHeight,
d.documentElement.clientHeight ) ]

}

A bug in earlier versions (all but the latest) versions of Opera will
result in a height that is too big (assuming the document is taller
than the viewport.) The version in the FAQ addresses this.

ISTM that some agents will have issues when the document is shorter
(or narrower) than the viewport? There are other (less important)
considerations related to margins and borders on the outermost
rendered element (documentElement or body.)

[snip]

 

[dhtml]

Testing only with recent versions of browsers will fail to inform you
about the robustness of algorithm employed. It is usual very useful for
a script author employing someone else's code to know how it will fail
when it does fail (will exceptions be thrown (and is so which), or will
particular return values be used to indicate failure or non-viability in
the environment (such as a NaN from a function that, when viable, would
always return a non-NaN number)).


That entry will not be staying.

Hopefully not as long as the previous one did.

It has gotten others to start using document.client* properties.

All else being equal it is still far too
long to be a "quick answer" to anything.

The answer is fairly long in order to explain the problem.

It sounds like you have an idea about how it might be improved -- lets
hear it.

function clientSize() {
var d = document;
if ( d.clientHeight ) { return [d.clientWidth, d.clientHeight]; }
return [
Math.max( d.body.clientWidth, d.documentElement.clientWidth ),
Math.max(
d.body.clientHeight,
d.documentElement.clientHeight
)
]
}

I strongly encourage anyone who has solved

"Solved"? One of the re-occurring browser "bugs" in relation to viewport
dimension reading has been - clientWidth/Height - properties reporting
the full dimensions of the document, so an algorithm that chooses the
greater of two will fall down whenever it encounters such an environment.

The OPs code would also fail in a browser that doesn't have
documentElement.clientWidth.

Math.max(600, undefined)

NaN

That would include Mac IE (and NS4, IE4), although I don't care about
that browser anymore. That could be coded around as:-

Math.max(d.body.clientWidth||0, d.documentElement.clientWidth||0);

Though that does not account for the problem of client* returning the
dimensions of the document in older browsers.

Recent versions of Opera, Safari, Firefox, IE, all give the viewport
dimensions for documentElement.client*.

Garrett