Get invisible inner div

Question

I have a div (parentDivStyle) with an absolute position, which is my parent div. Then I have 5 child (childDivStyle) divs inside the parent div with a relative position. I set overflow to hide the parent div. Therefore, some child divs are not visible. I would like to get divs that are not visible to jQuery. Is there any way?

I have googled and most of the results related to the "visible" property, This is not what I want. And also I do not prefer the 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

Using this answer about getting the coordinates of elements, you can find out where the elements are relative to each other. When you know the coordinates of the visible area, you can easily determine which children are visible.

This will tell you if the elements are visible, and if not, in which direction they belong 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 unlocked your JSFiddle here

Answer 2

You can use the position of the child divs and the height of the parent type:

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

Working script: http://jsfiddle.net/3suDz/3/

Hope this helps.

Answer 3

Try entering the code

 $('div.parentDivStyle div').each(function(index, element){ alert(this.offsetTop + $(this).height() > $('div.parentDivStyle').height()); }); 

if the child div is hidden then it will return true else false.

Check on the violin http://jsfiddle.net/3suDz/4/

Answer 4

Here's a script that takes into account the relative nature of child divs. It can be compressed, but I left it in a long form, so the logic is obvious.

http://jsfiddle.net/arpTx/18/

 $("#p").children().each( function(idx, el) { var pos = $(el).position(); console.log("child " + $(el).text() + " is visible: " + isVisible(pos.left, pos.top)); }); function isVisible(x, y) { var pos = $("#p").position(); var left = pos.left; var right = left + $("#p").width(); var top = pos.top; var bottom = top + $("#p").height(); x += left; y += top; return (x >= left && x < right) && (y >= top && y < bottom); } 

Answer 5

How about it as a solution

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 id="parent" 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> 

Javascript

 function getNotVisible(parentId, childClassName) { var parent = document.getElementById(parentId), children, elements; if (parent) { children = parent.getElementsByClassName(childClassName); if (children) { elements = []; Array.prototype.forEach.call(children, function (child) { var pBounds = parent.getBoundingClientRect(), cBounds = child.getBoundingClientRect(); if (cBounds.right < pBounds.left || cBounds.left > pBounds.right || cBounds.bottom < pBounds.top || cBounds.top > pBounds.bottom) { elements.push(child); } }); } } return elements; } console.log(getNotVisible("parent", "childDivStyle")); 

Jsfiddle on

BTW, if you need a jquery object from this, do the following

 var $hiddens = $(getNotVisible("parent", "childDivStyle")); 

In addition, if you want the returned array, not undefined, that is, silently if the parent is not or no children are found.

Then remove

 elements = []; 

And change

 var parent = document.getElementById(parentId), children, elements = []; 

And, of course, it all depends on whether you set up your CSS correctly, since checks are not performed for visibility or overflow , etc.

If you want to add CSS checks to double-check CSS, you can use window.getComputedStyle and check important values.

Answer 6

You can use jQuery is () function, for example:

 $(element).is(":visible") 

So, in your case, you would do something like this:

 var elems = $(".childDivStyle"); for(var i = 0; i < elems.length; i++) { if(!($(elems[i]).is(":visible"))) { // The element is hidden } }