CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
ClayKaboom
ClayKaboom

Reputation: 1833

How to determine if HTML Control is being displayed in page?

I'd like to know how could I get only the displayed controls in the screen in the very moment.

For example:

If I have a scrollbar which precludes the user from seeing everything below the page, I'd like to make a selector which selects only what the user can see in his screen now. It would also be nice If I could select everything he does not see.

Is that possible? How?

Thanks

Upvotes: 1

Views: 67

Answers (2)

rfunduk
rfunduk

Reputation: 30432

You could calculate the offsets (say, as the user scrolls) of what the user can see:

var top = $(window).scrollTop();
var bottom = top + $(window).height();

Then, you can see if an element is within this range.

$('*').each( function() {
  var el = $(this);
  var offsetTop = el.offset().top;
  var inView = offsetTop >= top && offsetTop <= bottom;
  el.addClass( inView ? 'in-view' : 'out-of-view' );
} );

Obviously there are some downsides performance wise to doing this. Depending what you want to do with this information you could select only inputs or whatever which might help.

Upvotes: 2

T. Junghans
T. Junghans

Reputation: 11683

I don't know if there is an easy or elegant solution to this. What you could do is calculate the offset position of all elements and the scroll offset to find out which elements are visible or not. This could become expensive if you have a lot of elements to check, but could work quite nicely otherwise.

Upvotes: 0

Related Questions