current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
1  
Also see stackoverflow.com/questions/12066870/… as it might be easier using .getBoundingClientRect –  andyb Oct 29 '13 at 15:02
add comment

2 Answers 2

up vote 1 down vote accepted

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');
    }

});
share|improve this answer
    
thanks so much, I will take a look :D –  l2aelba Oct 29 '13 at 14:53
    
Thanks so much , what about detect 100 objs ? –  l2aelba Oct 30 '13 at 12:07
1  
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. –  enyce12 Nov 6 '13 at 12:32
add comment
up vote 2 down vote

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.

share|improve this answer
    
let me try a min .... –  l2aelba Oct 29 '13 at 14:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.