0

Image the browser user take a screen capture of page.

I would like to write a javascript function that will tell me if in that screen capture, the DOM element i am interested in appear or not (so partially covered is ok, completely covered is not ok).

For example, pretend the DOM element i am interested in is a button, i think i need to check the following thing :

  • is the button visible
  • is the button inside any element that is not visible
  • is the button in the view port
  • is the button "totally" covered by anything (overlay)

It's trivial to know if the button is visible (eg with jQuery $("#buttonId").is(':visible')).

It's also trivial to iterate the previous function, foreach DOM element parent.

I found out many example on how to check if the DOM element is in the view port (so also this point is clear to me)

But is not clear to me how to check if the element is completely covered by other DOM element (in a faseable, so without comparing all DOM elements) nor i am sure if i have exausted the situation in which the DOM element of interest may be not shown in the screen capture that the browser user has taken.

-- Not a duplicate

This question is not focused only on occlusion problem, and also ask if there are any other strange condition that will lead a DOM element not to be rendered in the screen capture

Skary
  • 1,322
  • 1
  • 13
  • 40
  • *"But is not clear to me how to check if the element is completely covered by other DOM element"* Check the element's top-left, top-right, bottom-left, and bottom-right (or more if you want to be more thorough) as shown in the linked question's answers (the first answer there as I write this, `document.elementFromPoint(element.offsetLeft, element.offsetTop) === element;`, checks the top left). – T.J. Crowder Jan 19 '23 at 16:08
  • You will have to iterate through all other elements and check their position and dimensions against each other and the view port. You can skip those who have width <= 0, height <= 0, visibility: hidden or opacity: 0. Check the docs as well: [:visible Selector](https://api.jquery.com/visible-selector/) – Peter Krebs Jan 19 '23 at 16:11
  • so it sound really expensive to check for overlapping, in particular if as in my situation the DOM consist in few thousand elements. I hoped there are some built in (in the browse) API to get overlapping items (browser need to know) – Skary Jan 19 '23 at 16:17
  • You can search for exactly that (browser find overlapping elements) and get answers like this: [find overlapping elements](https://stackoverflow.com/questions/32713250/how-to-detect-if-an-element-is-covered-overlapped-by-another-one). You will still have to do the loop, though. – Peter Krebs Jan 20 '23 at 09:04

0 Answers0