Cross-Browser Client Size

Martin Rinehart · Dec 18, 2008

I've checked the following page 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
).

-------------------------------------
<html> <body>
<button onclick='alert( clientSize() )'> How big am I? </button>
<script>
function clientSize() {
var d = document, dB = d.body;
return [ dB.clientWidth,
d.clientHeight ? Math.max(d.clientHeight, dB.clientHeight) :
dB.clientHeight ]
}
</script>
</body> </html>

David Mark · Dec 18, 2008

I've checked the following page 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

As mentioned, that FAQ entry needs to be rewritten. The explanations
for the code are completely wrong.

However, I am sure it works far better than this entry.

).

-------------------------------------
<html> <body>
<button onclick='alert( clientSize() )'> How big am I? </button>
<script>
function clientSize() {
var d = document, dB = d.body;
return [ dB.clientWidth,
d.clientHeight ? Math.max(d.clientHeight, dB.clientHeight) :
dB.clientHeight ]}

This is pure, unadulterated nonsense. Have you never heard of the
documentElement property? I seem to remember that was an issue for
you on your last project.

[smip]

Martin Rinehart · Dec 18, 2008

This is pure, unadulterated nonsense.

You should really take the trouble to check before making this claim.

Have you never heard of the documentElement property?

I've heard of it and took the trouble to check it with each of the
browsers I mentioned. No longer needed.

I do hope other readers will try the function on lots of browsers and
report any issues.

David Mark · Dec 18, 2008

You should really take the trouble to check before making this claim.

The code is bunk. No need to check.

I've heard of it and took the trouble to check it with each of the
browsers I mentioned. No longer needed.

What does that mean?

I do hope other readers will try the function on lots of browsers and
report any issues.

I do hope you will stop wasting time like this.

Henry · Dec 18, 2008

You should really take the trouble to check before
making this claim.

There is no need to check as it is obvious form your code that this
version will not cut it.

I've heard of it and took the trouble to check it with
each of the browsers I mentioned. No longer needed.

You haven't understood where/why it is relevant.

I do hope other readers will try the function on lots of
browsers and report any issues.

In this (functional identical) version:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <body>
<button onclick='alert( clientSize() )'> How big am I? </button>
<script>
function clientSize() {
var d = document, dB = d.body;
return [
dB.clientWidth,
d.clientHeight ?
Math.max(d.clientHeight, dB.clientHeight) :
dB.clientHeight
];
}
</script>
</body> </html>

- IE 6 shows a very obviously incorrect value for the height of the
viewport. The correct viewport height value would have been the one
read from - document.documentElement.clientHeight -.

Martin Rinehart · Dec 18, 2008

[documentElement] No longer needed.

Click to expand...

What does that mean?

documentElement.clientHeight is
0 on IE 6 and 7
a small, erroneous number on FF, Opera (KDE and Win), Konqueror
same as document.body.clientHeight on Chrome, Safari and
Netscape7.2

This little tester may save you some time:
----------------------------------------------------------------------------
<html> <body>
<script>
var d = document, dE = d.documentElement, dB = d.body;
alert(
'd.clientW,H: ' + d.clientWidth + ', ' + d.clientHeight + '\n' +
'd.documentElement.clientW,H: ' + dE.clientWidth + ', ' +
dE.clientHeight + '\n' +
'd.body.clientW,H: ' + dB.clientWidth + ', ' + dB.clientHeight );
</script>
</body></html>

David Mark · Dec 18, 2008

[documentElement] No longer needed.

Click to expand...

Click to expand...

What does that mean?

Click to expand...

documentElement.clientHeight is
0 on IE 6 and 7

In quirks mode. Apparently you haven't grasped some basic concepts.

a small, erroneous number on FF, Opera (KDE and Win), Konqueror

I think not. One thing is for sure though, no matter what the FAQ
implies, it has nothing directly to do with the viewport size. It is
just a starting point in one branch.

same as document.body.clientHeight on Chrome, Safari and
Netscape7.2

This little tester may save you some time:

[snip]

Ironic that you endeavor to *save* my time.

Martin Rinehart · Dec 18, 2008

- IE 6 shows a very obviously incorrect value for the height of the

I just tested IE 6.0.29 ... and got 0 for
document.documentElement.clientHeight

What version?

Does "obviously incorrect" mean a very small number? That's what I get
on FF, Opera and Konqi.

David Mark · Dec 18, 2008

I just tested IE 6.0.29 ... and got 0 for
document.documentElement.clientHeight

What version?

Does "obviously incorrect" mean a very small number? That's what I get
on FF, Opera and Konqi.

You are talking to yourself. You might want to sit down.

Henry · Dec 18, 2008

No attribution?

I just tested IE 6.0.29 ... and got 0 for
document.documentElement.clientHeight

But did you try the mark-up I posted? (I already know you did not.)

What version?

IE 6.0.2900.2180 ...

Does "obviously incorrect" mean a very small number?

It means 28 with a viewport height of at least 500.

That's what I get
on FF, Opera and Konqi.

Are you saying that your algorithm is wrong in all of those browsers?

Martin Rinehart · Dec 18, 2008

You are absolutely correct. documentElement is needed when you are not
in quirks mode. My tests were all in quirks mode. Will fix.

And thank you. That's why I posted here.

David Mark · Dec 18, 2008

You are absolutely correct. documentElement is needed when you are not
in quirks mode. My tests were all in quirks mode. Will fix.

Also needed in virtually any other modern browser.

[snip]

dhtml · Dec 19, 2008

David said:
As mentioned, that FAQ entry needs to be rewritten. The explanations
for the code are completely wrong.

I missed that discussion. Can you point me to it or elaborate on the
problem?

Garrett

David Mark · Dec 19, 2008

I missed that discussion. Can you point me to it or elaborate on the
problem?

It was about a month ago. I can't remember what topic triggered it. I
really strongly disagreed with the explanation of the code. Something
about the clientHeight/Width properties and what they are used for.
The code itself was fine IIRC.

Sorry, I meant to add the flag for a FAQ entry. Be glad to revisit the
issue as the FAQ examples should have clear explanations.

[snip]

Cross-Browser Client Size, Encore	2	Dec 22, 2008
Cross browser event issues	4	Oct 24, 2008
Cross-Browser onmousedown JavaScript	13	Jan 22, 2009
FAQ 9.3--Replacement?	3	Nov 26, 2009
Cross Browser "Form Auto Submit on Enter"	2	Feb 8, 2007
Cross browser horizontal overflow	2	Nov 5, 2006
cross browser FF style SELECT element	0	Mar 25, 2006
input in a text box still appear after page refresh for IE but notFF, Chrome, Opera	4	Apr 7, 2010

Cross-Browser Client Size

Martin Rinehart

David Mark

Martin Rinehart

David Mark

Henry

Martin Rinehart

David Mark

Martin Rinehart

David Mark

Henry

Martin Rinehart

David Mark

dhtml

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads