7

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!

Feniks502
  • 95
  • 1
  • 2
  • 7
  • 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 Apr 19 '11 at 18:26

2 Answers2

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;
}
ChrisThompson
  • 1,998
  • 12
  • 17
  • 1
    Um... If that's pseudo-code, sure. You need to check the position of all the `offsetParent`s, get the `offsetWidth`, `offsetHeight`, etc... –  Apr 19 '11 at 18:30
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.

Karl Andrew
  • 1,563
  • 11
  • 14
  • 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. – Feniks502 Apr 19 '11 at 18:57
  • 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 Apr 20 '11 at 12:44
  • 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? – Karl Andrew Apr 20 '11 at 13:06
  • 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 Apr 20 '11 at 13:11
  • Sounds good, but I suppose this method much more complicated, then just calculating element's positions. – Feniks502 Apr 20 '11 at 13:14