2

I have a <div> that has style="overflow:hidden" and the <body> is a fixed size, the idea for it is to be a multi-screen display with no UI.

Is there a way to access these "non-visible" elements to know which is the first element that doesn't fit on the page?

I'm sure its probably something very simple, but I'm new to html and JavaScript so it makes searching for things difficult.

mplungjan
  • 134,906
  • 25
  • 152
  • 209
Cob50nm
  • 811
  • 2
  • 7
  • 25
  • 2
    `overflow:hidden` is not the same as hidden element. – dfsq Sep 18 '14 at 09:28
  • http://stackoverflow.com/questions/20644029/checking-if-a-div-is-visible-within-viewport-using-jquery – mplungjan Sep 18 '14 at 09:29
  • I didn't realize they were different things, as I said new to this. I just assumed they were hidden because if I inspect elements after the page has been rendered anything that doesn't fit on the page is no longer in the html. – Cob50nm Sep 18 '14 at 09:41

4 Answers4

2

You can use that plugin https://github.com/teamdf/jquery-visible/.

To check if an element is visible:

$('element').visible();

To get all elements instead of testing one you could do something like that:

$('elements').filter(function( index ) { return $(this).visible(); });
Joanvo
  • 5,200
  • 2
  • 21
  • 34
0

If you don't wanna use a jQuery plugin (answer provided Joanvo), you can use this way, answered on SO : How to tell if a DOM element is visible in the current viewport?

It's pretty much the same.

Note that getBoundingClientRect() became the best pratice to get viewport dimensions.

Community
  • 1
  • 1
enguerranws
  • 7,273
  • 7
  • 40
  • 83
0

Yes there is a way

var winHeight = $(window).height();

var firstElement = null;
function findFirstHiddenElement(ele)
{
  if(firstElement != null) return;
  if(ele.offset().top>winHeight){ 
    firstElement = ele;
    return true;
  }
  else{
    ele.children().each(function(){
      if(firstElement != null) return false;
    if($(this).children().length>0)  findFirstHiddenElement($(this));
   });
  }
}

$(document).ready(function(){
   findFirstHiddenElement($("body"));
});
Ronak Patel
  • 2,430
  • 14
  • 19
-3

you can try this code

var hiddenElements = $( "body" ).find( ":hidden" );

in some browser scripts are hidden elements for that

var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );

oki now I understood.

I think the top of overflow:hidden element is compare with body height then its possible to group all the hidden elements. try this. change as per your needs

var bodyHeight = $("body").height();
var hiddenElments = new Array();

$("body").find("*").each(function(){
    if ($(this).position().top > h)
        hiddenEls.push($(this));
});
V2Solutions - MS Team
  • 1,119
  • 6
  • 6