How can I invoke a javascript function div upon divs overlapping.

Question

I have 2 divs, one positioned absolutely right: 0 and the other relatively positioned center screen. When the window's width is too small, they overlap. How can I invoke a javascript function when this happens?

Thanks. Mike

Edited to make clearer.

Answer 1

Part 1:

Do it like this:

<script type="text/javascript">
document.getElementById('example').style.display = "inline";
</script>

...

<div id="example"> ... </div>

Answer 2

document.getElementById('div_id').style.display = 'inline-block'

document.getElementById('div_id').offsetWidth gives us width of div

offsetHeight, offsetLeft, offsetTop are useful also.

Answer 3

To check for overlapping div's you might wanna do a check once the page is loaded, and whenever the window is resized:

window.onload = checkOverlap;
window.onresize = checkOverlap;

And then use some offset-checking:

function checkOverlap() {
   var centerBox = document.getElementById('centerDiv');
   var rightBox = document.getElementById('rightDiv');
   console.log("centerbox offset left: " + centerBox.offsetLeft);
   console.log("centerbox width: " + centerBox.offsetWidth);
   console.log("rightbox offset left: " + rightBox.offsetLeft);
   if ((centerBox.offsetLeft + centerBox.offsetWidth) >= rightBox.offsetLeft) {
      centerBox.style.display = "inline-block";
   } else {
      centerBox.style.display = "block";
   }
}

You might wanna do some more checks in the function, e.g. to see if the box is already displayed inline, and such. But that should give you a good place to start.

edit: added some diagnostics and fixed error