Detect element if over another element via using CSS3 Transform

Question

Any easy way to detect element if its over another element ?

I'm using CSS3 transform to move a element. (because)

Example : - All element size 10x10 pixels

Element#A transform : translate(170px, 180px) <-- This element can controll for moving
Element#B transform : translate(200px, 200px)

How to detect is element#A over some element ?

My full demo with jQuery element controller : http://jsfiddle.net/ndZj5/

var over = false;
// do something with `over` to `true` to detect this...
if(!over) {
  my.css('transform','translate('+x+'px,'+y+'px)');
}

Take a tour on my demo , press keyboard arrows to controll

Also see stackoverflow.com/questions/12066870/… as it might be easier using .getBoundingClientRect — andyb
– andyb, Commented Oct 29, 2013 at 15:02

damian · Accepted Answer · 2013-10-29 16:51:48Z

3

You need to use offset to get the position of the moved object and compare it with the "blocks".

I've setup in my demonstration the "blocks" to change to blue when they are overlayed. But you can do whatever you want.

Also you were creating an overhead with your setInterval. I've moved it to the keyup event handler.

Further I recommend you to store the position of the "blocks" in an array if they are static elements and access them when needed.

Working example

var objTop = my.offset().top,
    objLeft = my.offset().left,
    objWidth = my.width(),
    objHeight = my.height();            

$('.fixed').each(function(e){
    var self = $(this),
        selfLeft = self.offset().left,
        selfTop = self.offset().top,
        selfWidth = self.width(),
        selfHeight = self.height();

    self.css('background','black');                 

    if((objLeft + objWidth) > selfLeft && objLeft < (selfLeft + selfWidth) && (objTop + objHeight) > selfTop && objTop < (selfTop + selfHeight)){
        self.css('background','blue');
    }

});

edited Oct 29, 2013 at 16:51

answered Oct 29, 2013 at 14:52

damian

5,4845 gold badges37 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

l2aelba Over a year ago

Thanks so much , what about detect 100 objs ?

damian Over a year ago

This will also work for 100 objects although it won't work very fast. As I said, I recommend you to store the position of the fixed elements in an array (or perhaps in a json file which would be better in this case) an access them when needed.

Marvin Over a year ago

@enyce12 Can you add what this would look like in Pure JavaScript?

Explosion Pills · Accepted Answer · 2013-10-29 14:41:17Z

2

You can use .offset to see the position of an element relative to the document. This does take into account translate. You can get the coordinates of the rectangle with .offset and then .offset.left + width / .offset.top + height. Then you can easily check for an overlap.

answered Oct 29, 2013 at 14:41

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Collectives™ on Stack Overflow

Detect element if over another element via using CSS3 Transform

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related