[Javascript] Detect overlapping controls?

[Peter Brunone]

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


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050204/99de7d81/attachment.htm>