Can I detect the user viewable area on the browser?

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".

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.

Try it :) http://jsfiddle.net/Aj2fU/5/

$('input').click(function(){
   // check for visible divs with class 'check'   
    $('.check').each(function(){
        var pos = $(this).offset(),
            wX = $(window).scrollLeft(), wY = $(window).scrollTop(),
            wH = $(window).height(), wW = $(window).width(),
            oH = $(this).outerHeight(), oW = $(this).outerWidth();

        // check the edges
        // left, top and right, bottom are in the viewport
        if (pos.left >= wX && pos.top >= wY && 
            oW + pos.left <= wX + wW && oH + pos.top <= wY + wH )
            alert('Div #' + $(this).attr('id') + ' is fully visible');
        else // partially visible   
        if (((pos.left <= wX && pos.left + oW > wX) ||
             (pos.left >= wX && pos.left <= wX + wW)) &&
            ((pos.top <= wY && pos.top + oH > wY)   ||
             (pos.top  >= wY && pos.top  <= wY + wH)))
            alert('Div #' + $(this).attr('id') + ' is partially visible');
        else // not visible 
            alert('Div #' + $(this).attr('id') + ' is not visible');
    });        
});​

Updated to work with very wide divs. Basically it checks whether the left, top and right, bottom edges of the divs are both in the visible part of the screen, partially or outside of the viewport.

Basically, you'd first have to measure the viewport dimentions, by using the window object, then you'd need to loop through each of the elements that you want to check, and calculate wether they fit.

See this jsfiddle for an example.

Here's the code (for posterity's sake):

HTML:

<div id="info">
    <p class="wxh"></p>
    <p class="txl"></p>
    <p class="report"></p>
</div>

<h1>A big list!</h1>
<ul></ul>

CSS:

#info{
    position: fixed;
    right: 0px;
    text-align: center;
    background: white;
    border: 2px solid black;
    padding: 10px;
}

JS:

    $(function(){

    $(window).bind('scroll.measure resize.measure',function(){

        // Gather together the window width, height, and scroll position.
        var winWidth = $(window).width(),
            winHeight = $(window).height(),
            winLeft = $(window).scrollLeft(),
            winTop = $(window).scrollTop(),
            winBottom = winTop + winHeight,
            winRight = winLeft + winWidth,
            inView = [];

        // Loop over each of the elements you want to check
        $('.inview').each(function(){

            // Get the elements position and dimentions.
            var pos = $(this).position(),
                width = $(this).outerWidth(),
                height = $(this).outerHeight();

            // Set bottom and right dimentions.
            pos.bottom = pos.top + height;
            pos.right = pos.left + width;

            // Check whether this element is partially within
            // the window's visible area.
            if((
                pos.left >= winLeft &&
                pos.top >= winTop &&
                pos.right <= winRight &&
                pos.bottom <= winBottom
            ) || (
                pos.left >= winLeft && pos.top >= winTop && 
                pos.left <= winRight && pos.top <= winBottom
            ) || (
                pos.right <= winRight && pos.bottom <= winBottom &&
                pos.right >= winLeft && pos.bottom >= winTop
            )){
                // Change this to push the actual element if you need it.
                inView.push( $(this).text() );
            }
        });

        // For the purposes of this example, we only need the
        // first and last element, but in your application you may need all.
        var first = inView.shift(),
            last = inView.pop();

        // Show the details in the info box.
        $('#info .wxh').text( winWidth+' x '+winHeight );
        $('#info .txl').text( winTop+' x '+winLeft );
        $('#info .report').text( 'Showing from '+first+' to '+last );
    });

    // The rest is just setup stuff, to make the area scrollable.
    for( var i=0; i<100; i++ ){
        $('ul').append('<li class="inview">List item '+i+'</li>');
    }

    $(window).trigger('resize.measure');
})    ​

You can get window's visible area by,

var pwidth = $(window).width();
var pheight = $(window).height();

Then get document scroll,

$(document).scroll(function(e) {
       var top = $(this).scrollTop();       
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px");
    });

Full example is here : http://jsfiddle.net/parag1111/kSaNp/