How to detect elements overlapping (overlaying) using JavaScript?

Question

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!

If you have absolutely positioned elements, then it's not trivial - you need to calculate each elements position etc. and act accordingly. Maybe you should consider achieving the same effect without absolutes, maybe some mix of floats (float:left) and absolutes (position:absolute) inside relatives (position:relative). — Andris
– Andris, Commented Apr 19, 2011 at 18:26

ChrisThompson · Accepted Answer · 2011-04-19 18:26:59Z

9

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

answered Apr 19, 2011 at 18:26

ChrisThompson

2,00813 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user578895 Over a year ago

Um... If that's pseudo-code, sure. You need to check the position of all the offsetParents, get the offsetWidth, offsetHeight, etc...

Karl Andrew · Accepted Answer · 2011-04-19 18:29:58Z

0

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.

answered Apr 19, 2011 at 18:29

Karl Andrew

1,55511 silver badges14 bronze badges

5 Comments

Feniks502 Over a year ago

It's impossible, on different site pages amount of list items and its content is different, so on some pages item list takes really much place.

Karl Andrew Over a year ago

The content of the list items or the page? If the list items are uniform in height, then you can still work out that 10 items will overlap a div at top:100px, therefore 5 items overlap top:50px etc. You'd write a function to take the number of items, and position of the div, and decide whether to hide. Or am I missing something?

Karl Andrew Over a year ago

Heh. You could factor the current window width into the equation for when the list items wrap. (And, of course, the text size and text length.) What's your current thinking?

Feniks502 Over a year ago

Unfortunately, list items aren't uniform in height, because its content moves to a new line, depending on window width, so in my case this method is almost useless. I think, the best way is to calculate element's positions and check if they matched, like ChrisThompson offered above. I'd tried such method using JQuery before, but position calculations somehow were wrong, maybe I've just made a mistake, but function looked correct.

Feniks502 Over a year ago

Sounds good, but I suppose this method much more complicated, then just calculating element's positions.

Collectives™ on Stack Overflow

How to detect elements overlapping (overlaying) using JavaScript?

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related