HTML how to tell which elements are visible?

Question

I have seen several solutions which determine when an element is visible in the viewport whilst scrolling the page, but I haven\'t seen any which do this for elements that a

Answer 1

include jQuery library on page first.

function getObjDims(obj){
    if (!obj) return false;
    var off = $(obj).offset();
    var t = {
        top:off.top,
        left:off.left,
        width:$(obj).width(),
        height:$(obj).height()
    };
    return {x1:t.left, y1:t.top, x2:t.left+t.width,y2:t.top+t.height}
};
function testInside(pic,box){
    var d=getObjDims(pic);
    return (box.x1<=d.x1 && box.y1<=d.y1 && box.x2>=d.x2 && box.y2>=d.y2)?1:-1;
};
$(document).ready(function(){
    var inside={};
    var port=$('#scrollContainer');
    var box=getObjDims(port);
    $(window).resize(function(){
        box=getObjDims(port);
    });
    $(port).scroll(function(){      
        var str=[];
        $('.picture').each(function(i){
            var oldState = inside[this.id]!=undefined?inside[this.id]:0;            
            var newState = testInside(this,box);
            inside[this.id]=newState;
            if (oldState!=newState)
                switch (newState){
                    case 1:str.push(this.id);break;// go IN
                    case -1: break;// go OUT
                }
        });
        $('#picStatus').text(str.join(', '));
    });
});

Add in HTML for results output:

<div style='margin-top:280px;'>Pictures in window (numbers):</div>
<div id='picStatus'></div>

It is code based on object's coords, witch are recalculated on scroll event. There are some things to know. IE and, seems to be, Opera takes into consideration width and height of scrollbars themselves, that demands curtain code tuning. I just have suggested solution direction and did not spent much time for debugging this.

And yet, maybe will be useful following (from jquery api about offset):

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

Answer 2

http://www.quirksmode.org/mobile/viewports.html discusses the issues around viewports, determining their dimensions, and calculating element bounds relative to a viewport's coordinate frame. Part 2 of that blog post then goes into the implicit viewports in mobile browsers. He doesn't give code that answers your question exactly, but it's definitely relevant and worth a read.