Get the number of an element's pixels which ar

Question

I'm trying to get the total number of a given html element's pixels which are visible inside the viewport. This question and accepted answer Can I detect the user viewable area on the browser? were very useful for determining whether the element is in view/out of view/partially in view, but for the partially in view case I need to get the total (vertical x horizontal) number of pixels not obscured by the viewport. I was trying something like this, but the horizontal value is always wrong:

var $element            = $(element),
pos                     = $element.offset(),
elemLeft                = pos.left,
elemTop                 = pos.top,
elemHeight              = $element.outerHeight(), 
elemWidth               = $element.outerWidth(),
winLeft                 = $(top).scrollLeft(), 
winTop                  = $(top).scrollTop(),
winHeight               = $(top).height(), 
winWidth                = $(top).width(),
nElemTotalPx            = elemWidth*elemHeight,
nElemTotalPxInView,
nVpxInView              = elemHeight,
nHpxInView              = elemWidth;

//obscured by bottom of window
if(winTop > elemTop){
    nVpxInView = (elemTop+elemHeight)-winTop;
//obscured by top of window
}else if(winHeight-winTop > elemTop){
    nVpxInView = (winTop+winHeight)-elemTop;
};

//obscured by left of window
if(winLeft > elemLeft){
    nHpxInView = (elemLeft+elemWidth)-winLeft;
//obscured by right of window
}else if(winWidth-winLeft < elemLeft+elemWidth){
    nHpxInView = elemWidth-( elemWidth-(winWidth-winLeft) );
};

nElemTotalPxInView = nVpxInView*nHpxInView;
return nElemTotalPxInView;

Any help much appreciated!

Answer 1

My friend found another method to solve the problem. Setting 6 values each for both viewport and element means we can always calculate the percentage of pixels in view with a single equation:

_getPercentInView = function(element){
    $element = $(element);

    var pos                     = $element.offset(),
        theViewport             = {top:null, left:null, bottom:null, right:null, width:null, height:null},
        theElement              = {top:null, left:null, bottom:null, right:null, width:null, height:null},
        elemLeft                = pos.left,
        elemTop                 = pos.top,
        elemHeight              = $element.height(),
        elemWidth               = $element.width();

    theViewport.width       = $(window).width();
    theViewport.height      = $(window).height();
    theViewport.top         = $(window).scrollTop();
    theViewport.left        = $(window).scrollLeft();
    theViewport.bottom      = theViewport.top+theViewport.height;
    theViewport.right       = theViewport.left+theViewport.width;

    theElement.top          = elemTop - theViewport.top;
    theElement.left         = elemLeft - theViewport.left;
    theElement.width        = elemWidth;
    theElement.height       = elemHeight;
    theElement.bottom       = theElement.top+theElement.height;
    theElement.right        = theElement.left+theElement.width;

    var nPercentInView = Math.round(100 * ((theElement.height-(Math.max(0,0-theElement.top) + Math.max(0,theElement.bottom-theViewport.height))) / theElement.height) * ((theElement.width-(Math.max(0,0-theElement.left) + Math.max(0,theElement.right-theViewport.width))) / theElement.width)   );
    return nPercentInView;
},