CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Feniks502
Feniks502

Reputation: 95

How to detect elements overlapping (overlaying) using JavaScript?

How to detect overlap HTML elements, using JavaScript?

I have an item list (<ul>). It slides up and down using JavaScript. When it slides down, depending on number of item, it may overlap the other element (<div>), which is absolute positioned at this time (it can be changed).

How I can detect, when <ul> overlaps this <div>, to apply new style to the <div> to hide it temporary or to move it down a little bit, to prevent overlapping?
It's just not looking good, when they overlap))

Here you can see, what I'm talking about: http://timetable.raj.fvds.ru/

Thanks a lot!

Upvotes: 7

Views: 18265

Answers (2)

Karl Andrew
Karl Andrew

Reputation: 1555

This feels like collision detection, and there's a solution just posted. Instead, I would suggest working out how many list items would be needed for a menu to overlap (i.e. 10), and hide the div when those menus (with 10 li) are selected.

Upvotes: 0

ChrisThompson
ChrisThompson

Reputation: 2008

function isObjOnObj(a,b){
    var al = a.left;
    var ar = a.left+a.width;
    var bl = b.left;
    var br = b.left+b.width;

    var at = a.top;
    var ab = a.top+a.height;
    var bt = b.top;
    var bb = b.top+b.height;

    if(bl>ar || br<al){return false;}//overlap not possible
    if(bt>ab || bb<at){return false;}//overlap not possible

    if(bl>al && bl<ar){return true;}
    if(br>al && br<ar){return true;}

    if(bt>at && bt<ab){return true;}
    if(bb>at && bb<ab){return true;}

    return false;
}

Upvotes: 9

Related Questions