Can I detect the user viewable area on the browser?

Question

As you can see the image below, there is "A", "B", "C", "D" and "E" on the website, and the user may only can see the A, B, and a little parts of D in their browser. They need to require to scroll down the browser or some users may have a bigger screen, or a longer window on their browser that allow they can even see the element C.

Ok, my question is, is this possible to let me know what the user seeing on their browser using javascript? In this element, is "A", "B" and "D".

Answer 1

Using the following, you can get the browser's viewport size.

window.innerHeight; window.innerWidth; 

http://bit.ly/zzzVUv - Had to use Google Cache as site would not load for me. Original page: http://www.javascripter.net/faq/browserw.htm

If you want to detect how far they have scrolled down the page, you can use

window.scrollX;   // Horizontal scrolling window.scrollY;   // Vertical scrolling 

Also, I have found a window object - window.screen. On my system it has the following data:

window.screen.availHeight = 994; window.screen.availLeft = 0; window.screen.availTop = 0; window.screen.availWidth = 1280; window.screen.colorDepth = 32; window.screen.height = 1280; window.screen.pixelDepth = 32; window.screen.width = 1280; 

I hope these answer your question sufficiently.