Are two elements overlapping each other?
Finding if two elements overlap each other is a hard problem. Here is how I solved it (I doubt it can be made faster or simpler):
function isOverlapping(elm1, elm2) {
var pos_elm1 = AJS.absolutePosition(elm1);
var pos_elm2 = AJS.absolutePosition(elm2);
var top1 = pos_elm1.y;
var left1 = pos_elm1.x;
var right1 = left1 + elm1.offsetWidth;
var bottom1 = top1 + elm1.offsetHeight;
var top2 = pos_elm2.y;
var left2 = pos_elm2.x;
var right2 = left2 + elm2.offsetWidth;
var bottom2 = top2 + elm2.offsetHeight;
var getSign = function(v) {
if(v > 0) return "+";
else if(v < 0) return "-";
else return 0;
}
if ((getSign(top1 - bottom2) != getSign(bottom1 - top2)) &&
(getSign(left1 - right2) != getSign(right1 - left2)))
return true;
return false;
}
Works in IE, FF, Opera, Safari etc. AJS.absolutePosition: function absolutePosition(elm) {
var posObj = {'x': elm.offsetLeft, 'y': elm.offsetTop};
if(elm.offsetParent) {
var temp_pos = absolutePosition(elm.offsetParent);
posObj.x += temp_pos.x;
posObj.y += temp_pos.y;
}
return posObj;
}
This is taken from AJS [former AmiJS]. A new 3.0 version is coming out pretty soon - the first polymorphic JavaScript library.
Code
·
JavaScript
•
15. Aug 2006
|
|