[Javascript] Detect overlapping controls?

Paul Novitski paul at novitskisoftware.com
Fri Feb 4 00:25:59 CST 2005


At 08:27 PM 2/3/2005, Peter Brunone wrote:
>         Is it possible, with an absolutely-positioned element, to
>determine what controls (either absolutely or relatively positioned)
>overlap its current area?


Peter,

As far as I know you can determine the dimensions and position in the 
window of any element on the page, regardless of how it was 
positioned.  Peter-Paul Koch's got some nifty little functions for 
determining position on http://www.quirksmode.org/ (navigate to Javascript 
: DHTML : Find position)  Then it's a simple matter of iterating through 
all the elements on the page, doing the necessary arithmetic to discover if 
any overlap your target element.

Upon reflection, it seems to me that two boxes overlap if any one corner of 
either box lies between the top and bottom AND between the left and right 
edges of the other box.  That logic would require eight tests per pair of 
boxes to prove that they didn't overlap, testing each corner of both boxes 
to see if it lay within the other box.  Perhaps you can reduce that to 
something more elegant!

Well, let's see:  in four tests you can find out whether:
- the top of box A lies below the bottom of box B, or
- the bottom of box A lies above the top of box B, or
- the left edge of A lies to the right of B's right edge, or
- the right edge of A lies to the left of B's left edge.
If any of those are true, the boxes can't overlap.  If all are false, I 
believe they must overlap.  N'est ce pas?

Paul 





More information about the Javascript mailing list