Question

95

How to detect elements overlapping (overlaying) using JavaScript?

rated 0 times [ 96] [ 1] / answers: 1 / hits: 17947 / 13 Years ago, tue, april 19, 2011, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kevonmoisesf

Add To Favorites

Follow

Total Points: 693

Total Questions: 101

Total Answers: 128

Location: Reunion

Member since Mon, Dec 28, 2020

3 Years ago

kevonmoisesf questions

1 Bootstrap 5 update Tooltip Title with Javascript

Sat, Jan 23, 21, 00:00, 3 Years ago

1 How to wait for reaction and only then send message [discord.js]

Thu, Aug 13, 20, 00:00, 4 Years ago

1 How do you display content of a .JSON file using Discord.js?

Tue, Feb 18, 20, 00:00, 4 Years ago

1 Flatpickr : set default date only if date value is null/empty

Tue, Nov 5, 19, 00:00, 5 Years ago

1 VueJs object key/value is not reactive in v-for loop

Wed, Jun 12, 19, 00:00, 5 Years ago

View All

answered 13 Years ago bryantc · Accepted Answer

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;

}