1

How to get first visible DOM element currently showing on the screen ?

I tried something like

var el = document.elementFromPoint(x, y)

and increasing the y coordinates in a while loop, but the problem is it does not work when there are css multi columns on the document, in that case the < html > tag is returned, not the actual element. Is there any way I can really get the element on the (top,left) of the screen which works for css columns ?

CodeWeed
  • 851
  • 2
  • 16
  • 37

1 Answers1

4

This is a very basic example that just gets the element that is the furthest to the top. It's just a start, because you may want to take into consideration the left offset as well.

You'll want to exclude the body and html elements (as shown below), since they will always be first.

Fiddle

var first;
$(':visible').not('body, html').each(function() {
    if (typeof first == 'undefined') {
        first = $(this);
    } else if ($(this).offset().top < first.offset().top) {
        first = $(this);
    }
});
first.addClass('highlight');
Community
  • 1
  • 1
Aaron Blenkush
  • 2,975
  • 2
  • 25
  • 50
  • +1, with the caveat that if you care about the left too, you'll need to add that just like the top is checked here. – cHao Mar 14 '13 at 16:59
  • @Aaron Blenkush I think I will try this out and modify it to what I need. thanks – CodeWeed Mar 14 '13 at 17:01
  • 1
    @CodeWeed, I just realized as well: this won't take into account the scrolled position of the window. If that is a factor, you'll need to take that into consideration (subtract the `window.scrollY` from the offsets). You may also need to consider the height of each element -- you may scroll so that an element is off the edge of the window, but the bottom portion may still be visible. In that case you'd *add* the height of the element back in to get the "position" of the bottom edge of the element in relation to the window. Then you'd just get the smallest value that's not less than zero. – Aaron Blenkush Mar 14 '13 at 17:08
  • 1
    @CodeWeed: Actually, if you needed to take into account scrolling, you'd most likely need to implement an "overlap" formula, to see if the element overlaps with the window at all AND is `:visible` AND is closest to the top left. Don't know how complicated you want to go with this! – Aaron Blenkush Mar 14 '13 at 17:14
  • @AaronBlenkush Thanks I appreciate your input. – CodeWeed Mar 14 '13 at 17:31