How to detect if any divs are overlapping/'touching' a specific div?

Question

Background Summary

I have a toggle menu that moves and slides down upon document load. However the web page is responsive. So on bigger screen sizes there is empty room for the menu to unroll but some pages contain IMG, DIV, or SPAN tags that rearrange themselves via media queries and take up the needed space for the menu.

Thus one of two things can happen (that are not desired):

a) The page loads, the menu begins to slide open but there is already one of the aforementioned HTML objects already located in its path so the menu unrolls over it, making things look ugly.

b) A mobile visitor enters the site using landscape view and the menu unrolls with nothing in its path, but then the user changes to portrait view causing (sometimes) an HTML tag to overlap the menu.

Desired Result:

I would like the menu to react to its environment so that if some other DIV encroaches on its space, the menu would automatically trigger the click event on itself which would cause it roll back up and sit on its perch on top of the screen.

This would also mean that as it unrolls initially , the menu should be either 'aware' of what is below it and in the case something is there, to not unroll in the first place; or unroll until it touches some other html object in its way, and immediately reverse course and roll back up to its perch.

One quick look is worth a thousand sentences, so please take a look at jsfiddle below.

JSFiddle Setup of Current Code

http://jsfiddle.net/Nick_Wordpress/jLeGq/1/

Current Working Code

jQuery(window).load(function() {
  if (jQuery(".toggle").is(":hidden")) {
    jQuery(".toggler").trigger("click");
  }
});
jQuery(".toggler").on("click touchstart", function() {
  toggler = jQuery(this);
  room_navigation_top = 150;
  pos = 20;
  room_navigation_left = 80;
  toggler.next(".toggle").is(":visible") ? toggler.next(".toggle").slideUp(function() {
    toggler.addClass("minimized").removeClass("maximized").find(".indicator").text("+");
    toggler.parent().animate({top:pos + "px", left:pos + "px"});
  }) : ("object" == typeof event.originalEvent && (lock_room_navigation = !0), toggler.parent().animate({top:room_navigation_top + "px", left:room_navigation_left + "px"}, function() {
    toggler.addClass("maximized").removeClass("minimized").find(".indicator").text("-");
    toggler.next(".toggle").slideDown();
  }));
});

Thanks in advance for any input towards solving this issue.

Answer 1

Decide whether to expand the menu or not after you've calculated whether it would overlap any other elements. (Expanding first and then checking if you need to collapse it again would be an ugly solution)

Check for potential overlapping by calculating where the menu would be positioned on expansion, and compare that position to the elements which it could overlap. You should be able to figure out the expanded size if you know the number of menu items and the size of each menu item. Use the top, bottom, left and right properties together with the height and width to figure out the position. Compare the calculated position of the positions of the elements that risk being overlapped.

Here's some example code for calculating overlap (not written by me): http://jsfiddle.net/98sAG/

function getPositions( elem ) {
    var pos, width, height;
    pos = $( elem ).position();
    width = $( elem ).width();
    height = $( elem ).height();
    return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
function comparePositions( p1, p2 ) {
    var r1, r2;
    r1 = p1[0] < p2[0] ? p1 : p2;
    r2 = p1[0] < p2[0] ? p2 : p1;
    return r1[1] > r2[0] || r1[0] === r2[0];
}