8

I'd like to be able to know if a node is visible and rendered on screen. As far as I know, there are at least 3 standard and easy ways of making HTML nodes not visible:

  • Setting opacity: 0;
  • Setting display: none;
  • Setting visibility: hidden.

I could check for just these three, but I'm afraid people can get creative when it comes to ways of hiding contents:

  • Sending the element offscreen using negative margins;
  • Using a width or height of 0 and hiding overflow;
  • many more I trust people to have developed.

So I was wondering if there is a standard way of determining if a node is rendered to the screen. I'm pretty sure all major browsers determine it for themselves to accelerate drawing, so maybe it's somehow exposed.

zneak
  • 124,558
  • 39
  • 238
  • 307
  • 3
    Just to add to your problems: One of the parent elements of the element could have any one of those things set, which would make the element invisible as well. :D – Pekka Jun 17 '10 at 21:34
  • 1
    How about checking the size of the browser window, then find the position of the element, and then check all the options you mentioned, plus the z-index? – jnkrois Jun 17 '10 at 21:51
  • @jnkrois: I can't check the _many more I trust people to have developed_ because I don't know them. – zneak Jun 18 '10 at 00:04

2 Answers2

1

You might try using jQuery's :visible modifier.

http://api.jquery.com/visible-selector/

Unfortunately, I'm fairly sure that doesn't take into account any of the "tricky" cases that you are talking about.

Thomas
  • 4,459
  • 3
  • 21
  • 19
0

If this is your page, then you can have most of the control and it becomes a matter of applying the standards you implement. If this is a forign page (e.g. if you're writing a bookmarklet), then the number of variables is extremely large.

Visibility means different things to people and browsers. The browser needs to know the context and layout of the page and whether an object takes up space, which is true even in the cases of opacity:0 and visibility:hidden, which would be why jQuery works that way.

So you would need to look at the particular element, including its margins, padding, overflow attributes, visibility, display, all the opacity settings, check for color:rgba(*,*,*,0) too I guess. Then you need to look at every parent object all the way back to the document.

Phil
  • 121
  • 4