Get non visible inner div

Question

I have a div(parentDivStyle) with position absolute which is my parent div. Then I have 5 children(childDivStyle) div inside the parent div with position relative. I have set the overflow to hidden of the parent div. So some of the child divs are not visible. I would like to get the divs which are not visible by jquery. Is there any way?

I have googled it and most of the results where related to "visible" property, That is not what I want. And also I am not preferring any plugin. Any help please.

CSS

.parentDivStyle {
    overflow:hidden;
    width:300px;
    height:50px;
    position:absolute;
    background:#ccc;
    float:left;
}
.childDivStyle {
    width:100px;
    height:50px;
    position:relative;
    float:left;
    background:red;
    border: 1px solid black;
}

HTML

<div class="parentDivStyle">
<div class="childDivStyle">1</div>
<div class="childDivStyle">2</div>
<div class="childDivStyle">3</div>
<div class="childDivStyle">4</div>
<div class="childDivStyle">5</div>
</div>

JSFIDDLE

Answer 1

You can use the position of the child divs, and the height of the parent like this:

$('#parent .childDivStyle').each(function(index,div){
    if($(div).position().top > $('#parent').height()) alert($(div).html())
});

The working fiddle: http://jsfiddle.net/3suDz/3/

Hope it helps.

Answer 2

Using this answer about getting coordinates of elements, you can figure out where elements are in respect to each other. Once you know the coordinates of the visible area, you can easily figure out what child elements are visible.

This will tell you whether the elements are visible, and if not, which direction they are with respects to the container.

displayCoords = function(element) {
    var rect = element.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);   

    var childElements = element.children;
    for(i = 0; i < childElements.length; i++)
    {
        childRect = childElements[i].getBoundingClientRect();
        console.log(childRect.top, childRect.right, childRect.bottom, childRect.left);  
        if(childRect.top >=  rect.bottom)
            console.log("not visible -- off the bottom of element");
        else if(childRect.left >= rect.right)
            console.log("not visible -- off the right of element");
        else if(childRect.bottom <= rect.top)
            console.log("not visible -- off the top of element");
        else if(childRect.right <= rect.left)
            console.log("not visible -- off the left of element");
    }

}

I forked your JSFiddle here