Overlap Formatting

Question

I have a function isOverlap which tells if two objects overlap, here is the source code:

    function isOverlap(idOne,idTwo){
    var objOne=$("#"+idOne),
        objTwo=$("#"+idTwo),
        offsetOne = objOne.offset(),
        offsetTwo = objTwo.offset(),
        topOne=offsetOne.top,
        topTwo=offsetTwo.top,
        leftOne=offsetOne.left,
        leftTwo=offsetTwo.left,
        widthOne = objOne.width(),
        widthTwo = objTwo.width(),
        heightOne = objOne.height(),
        heightTwo = objTwo.height();
    var leftTop = leftTwo > leftOne && leftTwo < leftOne+widthOne 
            && topTwo > topOne && topTwo < topOne+heightOne,
        rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne 
            && topTwo > topOne && topTwo < topOne+heightOne,
        leftBottom = leftTwo > leftOne && leftTwo < leftOne+widthOne 
            && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne,
        rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne 
            && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne;
    return leftTop || rightTop || leftBottom || rightBottom;
}

The main thing I need is how to format calling the function, any help? Here is my failed attempt at doing so:

   if($(document).isOverlap("#mario", ".block")) {
       $(".block").hide("explode", { pieces: 16 }, 100);
   });

You can find the program I am attempting to make here

Answer 1

I found that the problem was that I simply had an unneeded ) when I was attempting to change the .click line to .isOverlap

Answer 2

isOverlap("#mario", ".block")

The strings you're passing to this function are complete jQuery selectors.

Therefore, "#"+idOne inside the function turns into "##mario", which is obviously wrong.

Also, if either of those selectors match multiple elements, your code won't work properly.