How to determine if one control overlaps the other?

[Jay]

Hi all,

I know how to find a controls' position obviously (i.e.style left,
right, top, offset, etc.), but what I'm a little stumped on is, if
given two controls' positions, how can I tell if one is overlapping/
invading the space of the other?

For example, I have an AJAX dragpanel and am experiencing the common
'bleed through' of dropdown controls when I drag the panel over them.
Naturally the customer doesn't like this. I experimented a little with
the IFrame solution, but did not have much luck. It seems easier now
to just use the 'ondragend' event and show/hide dropdowns accordingly.

Does anyone have a piece of code where, given two control objects as
passing parameters, it returns true or false in regards to them
overlapping or not?

THANK YOU...

[Thomas 'PointedEars' Lahn]

Jay wrote:

I know how to find a controls' position obviously (i.e.style left,
right, top, offset, etc.), but what I'm a little stumped on is, if
given two controls' positions, how can I tell if one is overlapping/
invading the space of the other?

Compare the coordinates of the corners of one element against the
coordinates of the corresponding corners of the other one.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[RobG]

On Oct 4, 8:45 am, David Mark <[e-mail]:

On Oct 3, 2:26 pm, Jay <[e-mail]:

[...]

For example, I have an AJAX dragpanel and am experiencing the common

I don't see what AJAX has to do with this, but anyhow...

'bleed through' of dropdown controls when I drag the panel over them.

That's because you didn't hide the inputs when the drag operation
started.

Inputs? I think you mean select elements. Hiding them to stop them
"showing through" is pretty ugly from a users' perspective.

Naturally the customer doesn't like this. I experimented a little with
the IFrame solution, but did not have much luck. It seems easier now

That Iframe "solution" is not a solution (it is an ugly workaround.)

Maybe, but it is a much better solution than toggling their
visibility.
[...]

>

Does anyone have a piece of code where, given two control objects as
passing parameters, it returns true or false in regards to them
overlapping or not?

There is no need to determine if they overlap - cover all of them with
iFrames. You can create all the iFrames at any time before dragging
starts, you might be able to put them in the source HTML but likely
script is better, then just toggle their display property (use a class
and CSS) when dragging starts and again when it ends. If the iFrames
have no visible style, they're invisible, the user will never know
you've done it.

During testing/debugging, give the iFrames a background colour to help
with making sure they're in the right spot.
--
Rob

[RobG]

On Oct 4, 2:00 pm, David Mark <[e-mail]:

On Oct 3, 10:17 pm, RobG <[e-mail]:

On Oct 4, 8:45 am, David Mark <[e-mail]:

On Oct 3, 2:26 pm, Jay <[e-mail]:

[...]

Naturally the customer doesn't like this. I experimented a little with
the IFrame solution, but did not have much luck. It seems easier now

That Iframe "solution" is not a solution (it is an ugly workaround.)

Maybe, but it is a much better solution than toggling their
visibility.

Hardly. Creating a bunch of non-standard "dummy" elements and then
going through all of the mess of positioning them

That can be done in a few lines of code with a reasonable position
function. The one at Javascript Toolbox seems to do the job OK.

is not a better
solution than simply hiding the inputs during the drag operation.
Clearly the inputs are not drop targets, so there is no reason they
need to be visible while dragging.

Yeah, a bit of playing shows IE makes life tough. I normally only use
iFrames under other elements, I'd forgotten that you can't make them
pretty in IE.

How about a single iFrame under the drag object that moves with it?
Then there's no need to find and hide the selects - I just hate the
idea the selects flashing on and off.
--
Rob

[Jay]

Thanks for all your 'wonderful' insight...Much obliged.