3

If I have a DIV element (the blu square B in the figure) absolutely positioned in the document and overlapped on another DIV (blank square A), then I can get if B cover completely A by comparing x1,y1,x2,y2 region of B with A.

However, if one or more B squares overlap A, how can I get if A is completely covered?

I cannot merge B1 and B2 regions then compare it with A because some areas may be still uncovered (as red areas in the figure).

In Flash there are some methods that simplify the calculation of regions but I don't figure out how to do it in jQuery.

enter image description here

Nelson
  • 49,283
  • 8
  • 68
  • 81
Max
  • 4,965
  • 17
  • 49
  • 64
  • 2
    This problem is essentially agnostic from jQuery, and will probably be best answered in programmers.stackexchange.com :D – Richard Neil Ilagan Oct 05 '12 at 15:11
  • Try to look at this: http://stackoverflow.com/questions/1560926/efficiently-detect-when-sibling-elements-overlap – Irvin Dominin Oct 05 '12 at 15:42
  • findIntersectors(targetSelector, intersectorsSelector) is an elegant function to get collisions, but I'm looking for some code to get if an item is completely covered/overlapped (visible/invisible). Thank you anyway. – Max Oct 05 '12 at 15:58

1 Answers1

0

I think there's no approach to this using just jQuery, however you can play with z-indexes of the elements and the position respect to the window http://api.jquery.com/position/

Also I found a solution in Javascript which might help you:

How to detect elements overlapping (overlaying) using JavaScript?

Community
  • 1
  • 1
Jorge Luis Vargas
  • 174
  • 1
  • 12