How to get amount of portions of a HTML element is visible in viewport

Question

• Is it possible to know whether or not an HTML element like image is viewable in current viewport or it will be visible on scroll?
  • If it is viewable completely or partially then how can I get the amount of portions is visible?

I am trying to explain it from the following image:

The two images at the bottom is partially visible within the viewport and these will be completely visible if one scroll down a little bit.

Now I want to get the the aforesaid information.

In the actual scenario I am trying to get the popup-zoom effect on hover of image in my album like google image search. Everything is fine, except if the images are placed in the described manner then the zoomed div also displaying in half.

Normal condition where image is completely in viewport:

And partially in viewport:

I really appreciate your help.

The code:

var albumDetailOnReady = function() {  

    $('.image').each(function(){
        var photo = $(this);
        var wrap = $(findParentByClassName(document.getElementById(photo.attr('id')), 'wrap'));
        var row = $(findParentByClassName(document.getElementById(wrap.attr('id')), 'albumDetailRow'));
        var visibleZone = $(wrap).find('.alDtlColumn');
        var pictureBlock = $(visibleZone).find('.pictuteBlock');        
        var hiddenZone = $(wrap).find('.hiddenZone');        

        $(photo).load(function(){
            if(177 > $(photo).width()){
                var imgleft = ($(pictureBlock).width() - $(photo).width())/2 + 'px';
                $(photo).css({'left': imgleft});
            }
        });

        $(photo).hover(function(){                         
            var y;            
            if($(photo).height() > $(photo).width()) {
                y = ($(visibleZone).offset().top - 50) + 'px';               
            } else {
                y = ($(visibleZone).offset().top + 50) + 'px';
            }         

            var x;
            if($(row).find('.wrap:first').attr('id') === $(wrap).attr('id')) {
                x = ($(visibleZone).offset().left - 10) + 'px';
            } else if($(row).find('.wrap:last').attr('id') === $(wrap).attr('id')) {
                x = ($(visibleZone).offset().left - 50) + 'px';
            } else {
                x = ($(visibleZone).offset().left - 20) + 'px';
            }

            $(hiddenZone).css({
                'top': y,
                'left': x,                
                'position': 'absolute',
                'z-index': '10'
            });          

            $(hiddenZone).fadeIn('fast');
        }, function(){

        });

        $(hiddenZone).hover(function(){},function(){
            $(hiddenZone).hide().stop(true, true);
        });
    });   
}

var findParentByClassName = function(element, clazz) {
    while (element.parentNode) {
        element = element.parentNode;
        if (hasClass(element, clazz)) {
            return element;
        }
    }
    return null;
}

function hasClass(element, cls) {
    var regex = new RegExp('\\b' + cls + '\\b');
    return regex.test(element.className);
}   

I am unable to show any HTML as I haven't have any, I am working in ADF framework.

But for an explanation:

I have two zone for each image: visible and hidden. Both of them are in a wrap. Now on hover an image I am showing the hidden div. The top and left of the hidden div is measured by the top and left of the visible div with some condition.

Answer 1

jQuery.Viewport

Very helpfull and lightweight jQuery plugin that makes an element as a handy viewport for displaying elements with absolute position. The plugin is hosted on GitHub. You can see it in action right there:

https://github.com/borbit/jquery.viewport