[Javascript] Detect overlapping controls?

Fri Feb 4 17:15:18 CST 2005

Sorry, that was my fault, we haven't published from the development server (where I spend most of 
my day) to the live production server.

The bleed-through issue was something I saw Microsoft deal with on their own site by setting 
objects to display: none;  - they've since changed the site so it doesn't happen to begin with.  

i don't know how long this is persisted, but here's the code i use:
http://erxz.com/pb/361

in the routine that opens the popup; if (document.all) {HideOnTops();}
then when i close it; if (document.all) {ShowOnTops();}
(I know it's not exactly efficient to iterate the collection twice and if you don't have object 
tags to worry about you could eliminate the second call)
(also, since bleed-through is an IE-specific problem, this sad hack is conditional)

I need approval before publishing to the production server (and some time to deal with inevitable 
impact/fallout)  - so I can't get the working example up tonight (friday) but maybe late monday 
morning you could try that link again.  (I'm putting the sticky on the monitor now to get 3 week 
old code running on the production server)

BTW, I re-read your quote of my original post, and realized there are still plenty of "proprietary 
tricks" used in my proposed solution too.  In this case, the tricks are to make IE work the way 
other browsers do, rather than to provide functionality that others do not have.  It's still 
distasteful, but at least it's the distaste I prefer  :)

On Fri, 4 Feb 2005 13:16:33 -0700
  "Peter Brunone" <peter at brunone.com> wrote:
>Hi Mike,
>
>   You've got my attention :)  Are you saying this will let me display an HTML element on top of 
>select boxes and other windowed elements without bleed-through?  If so, please help me understand 
>this a bit more.  Maybe I'm just a bit dense today, but I don't even see "Request a Catalog" and 
>"Email a Link" on that left menu.
>
>Thanks,
>
>Peter
>
> From: "Mike Dougherty" mdougherty at pbp.com
>
>use dhtml and DOM rather than proprietary tricks
>
>popup
>(other html, etc.)
> ...
>
>CSS:
>div#someName { display: none; ... }
>div#someName.show { display: block; ... }
>
>script:
>function togglePopup(tcObjName) {
>var loObj = document.getElementById(tcObjName);
>if (loObj.className.indexOf('show')>=0) { loObj.className.replace(/ show/g,'') }
>else { loObj.className += ' show' }
>return false;
>}
>
>if no javascript: the link takes the user to a dedicated page - otherwise the dhtml popup is 
>displayed by adding the "show" class to the object, and the style/position is controlled through 
>CSS
>
>if no css, the div would be displayed wherever it occurs in the html (which would probably make 
>more sense if the link jumped to an anchor inside the popup div, so that when both javascript and 
>css are turned off, someone would navigate directly to the contents through the link without even 
>requiring a page refresh. Although I wonder if you're really worried about anyone but googleBot 
>at that point. :)
>
>I used this technique (without the #anchor) in "Request a Catalog" and "Email a Link" (left nav) 
>on this site: http://pgiproducts.pbp.com
>
>On Fri, 4 Feb 2005 11:11:15 -0700
>"Peter Brunone" wrote:
>>Somebody needs to invent a date-sensitive, top-posting sig for Hakan :)
>>
>>Thanks; I'll look into these. Although I'm starting to realize the limitations here (other 
>>windowed controls and iframes with content from different sites so I can't alter the HTML), so I 
>>may have to take a stroll down createPopup lane (IE only; I don't know what I'm going to do for 
>>Moz).
>>
>>Cheers,
>>
>>Peter
>>
>>P.S. Save me a seat and a cold one.
>>
>> From: "Hakan M (Backbase)" hakan at backbase.com
>>
>>It is possible, in IE and Mozilla. They have proprietary functions that 
>>will help you.
>>
>>Anyway, I'm off for the pub, so I can't help you really much right now.
>>
>>But have a look at
>>
>>Mozilla: document.getBoxObjectFor(oElement);
>>IE: oElement.getBoundingClientRect();
>>
>>and they will provide you with all the stuff you need. Not that in IE, 
>>the offset is 2 pixels off (always).
>>
>>Hope this helps.
>>
>>Regards,
>>H
>>
>>Peter Brunone wrote:
>>> Thanks Paul and Richard...
>>> 
>>> I guess I was looking for some magical method that would allow me to 
>>> do this without iterating through *every* element on the page. Perhaps 
>>> that's not a possibility right now, and I just need to get down and 
>>> dirty with the DOM. As usual, I'm sure PPK's stuff will prove helpful.
>>> 
>>> Cheers,
>>> 
>>> Peter
>>> 
>>> *From*: Paul Novitski paul at novitskisoftware.com 
>>> 
>>> 
>>> 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
>>> 
>>> 
>>> ------------------------------------------------------------------------
>>> 
>>> _______________________________________________
>>> Javascript mailing list
>>> Javascript at LaTech.edu
>>> https://lists.LaTech.edu/mailman/listinfo/javascript
>>_______________________________________________
>>Javascript mailing list
>>Javascript at LaTech.edu
>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>>
>>
>>
>>
>>__________________________________________________________
>>This message was scanned by ATX
>>1:12:29 PM ET - 2/4/2005
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>
>
>
>__________________________________________________________
>This message was scanned by ATX
>3:17:59 PM ET - 2/4/2005