Determine actual viewing size in browser

Question

I am trying to determine the actual viewPORT size of the current browser window. I've tried:

• window.innerHeight/innerWidth
• document.documentElement.clientHeight/clientWidth
• document.body.clientHeight/clientWidth

All return the full page size and NOT the viewing area.

What I'm trying to ultimately achieve is forcing a popup menu to appear on screen (in the viewport). Right now when it is shown, it might show below the scroll and the users are not happy with that. I know the x,y of where they've clicked. I just need to compare that to the size of the viewing area (with the size of the popup) to see if it will go offscreen.

It should be noted that the page is showing in an IFRAME, so if I need to go up one level to get the correct value, I can do that.

Answer 1

Try

document.getElementById("").offsetWidth

Fill the above code with different element ID's, try using the body tag, or a wrapper div.

Answer 2

• window.innerHeight/innerWidth

That unequivocally does give you viewport size (in this case, the size inside your iframe), but it isn't available on IE.

• document.documentElement.clientHeight/clientWidth

That gives you viewport size, when the browser is in Standards mode. Typically used as fallback for IE.

• document.body.clientHeight/clientWidth

That gives you viewport height in Quirks mode. You don't want to be in Quirks mode. Check the <!DOCTYPE of your document.

I just need to compare that to the size of the viewing area

Then you'll also have to look at the document.documentElement.scrollTop/scrollLeft.

Answer 3

Apparently by going to the parent document, I was able to get the correct value.

Thanks!