FAQ Topic - How do I find the size of the window/browser canvas area?

[FAQ server]

-----------------------------------------------------------------------
FAQ Topic - How do I find the size of the window/browser canvas area?
-----------------------------------------------------------------------

While it is often asked about window size, what is more relevant is
the "canvas area" of the browser.

Where supported in NN: (>NN4.0)

var winWidth = window.innerWidth;
var winHeight = window.innerHeight;

Where supported in IE: (>IE4.0)

var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;

When using IE6 with in CSS1Compat mode (i.e. with a Formal DOCTYPE):

var winWidth = document.documentElement.clientWidth
var winHeight = document.documentElement.clientHeight

Combined:

var winWidth, winHeight, d=document;
if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
winWidth = d.documentElement.clientWidth
winHeight = d.documentElement.clientHeight
} else {
if (d.body &&
typeof d.body.clientWidth!='undefined') {
winWidth = d.body.clientWidth
winHeight = d.body.clientHeight
}
}
}

Note: The dimensions can not be determined accurately until after the
document has finished loading.

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientWidth.asp

http://docs.sun.com/source/816-6408-10/window.htm#1202446

http://msdn.microsoft.com/workshop/author/om/measuring.asp


===
Postings such as this are automatically sent once a day. Their
goal is to answer repeated questions, and to offer the content to
the community for continuous evaluation/improvement. The complete
comp.lang.javascript FAQ is at http://www.jibbering.com/faq/.
The FAQ workers are a group of volunteers.

 

[Randy Webb]

FAQ server said the following on 12/16/2006 2:35 AM:
This post confirms my beliefs that the postings from now on will come
from the new .XML file instead of the old one.

<URL: http://jibbering.com/faq/> still gives me the old file though :\

 

[Peter Michaux]

Combined:

var winWidth, winHeight, d=document;
if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
winWidth = d.documentElement.clientWidth
winHeight = d.documentElement.clientHeight
} else {
if (d.body &&
typeof d.body.clientWidth!='undefined') {
winWidth = d.body.clientWidth
winHeight = d.body.clientHeight
}
}
}

I've never seen anyone do

if () {
} else {
if () {
} else {
if () {
} else {
}
}
}

when it could be written

if () {
} else if () {
} else if () {
}

Also shouldn't this have one more else that return's NaN in case
nothing is supported?

var winWidth,
winHeight,
d = document;
if (typeof window.innerWidth != 'undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else if (d.documentElement &&
typeof d.documentElement.clientWidth != 'undefined' &&
d.documentElement.clientWidth != 0) {
winWidth = d.documentElement.clientWidth;
winHeight = d.documentElement.clientHeight;
} else if (d.body &&
typeof d.body.clientWidth != 'undefined') {
winWidth = d.body.clientWidth;
winHeight = d.body.clientHeight;
} else {
winWidth = NaN;
winHeight = NaN;
}


Peter

 

[Vince Morgan]

Also shouldn't this have one more else that return's NaN in case
nothing is supported?

var winWidth,
winHeight,
d = document;
if (typeof window.innerWidth != 'undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else if (d.documentElement &&
typeof d.documentElement.clientWidth != 'undefined' &&
d.documentElement.clientWidth != 0) {
winWidth = d.documentElement.clientWidth;
winHeight = d.documentElement.clientHeight;
} else if (d.body &&
typeof d.body.clientWidth != 'undefined') {
winWidth = d.body.clientWidth;
winHeight = d.body.clientHeight;
} else {
winWidth = NaN;
winHeight = NaN;
}


Peter

Or,.

var winHeight = NaN;
var winWidth = NaN;
d = document;
if (typeof window.innerWidth != 'undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else if (d.documentElement &&
typeof d.documentElement.clientWidth != 'undefined' &&
d.documentElement.clientWidth != 0) {
winWidth = d.documentElement.clientWidth;
winHeight = d.documentElement.clientHeight;
} else if (d.body &&
typeof d.body.clientWidth != 'undefined') {
winWidth = d.body.clientWidth;
winHeight = d.body.clientHeight;
}

Vince

 

[Dr J R Stockton]

In comp.lang.javascript message

I've never seen anyone do

if () {
} else {
if () {
} else {
if () {
} else {
}
}
}

when it could be written

if () {
} else if () {
} else if () {
}

Are you commenting on the indentation (which in both cases is logical
given the bracing) or on the bracing itself?

ISTR that one could use

switch (true) {
this && that : { something ; break }
tother : { otherwise ; break }
...

or for modularity make it a function

function Z() {
if (this && that) { something ; return { X:?, Y:?} }
if ...

with the possible disadvantage of needing to return an Object.

Also shouldn't this have one more else that return's NaN in case
nothing is supported?

We are not /frutiers anglais/ - returns, not return's. And, in the FAQ,
"can not" should be "cannot", which is unambiguous. But yes.