show bottom right corner of div if mouse click near bottom of browser window

Question

So I'm using the following to show div top left corner relative to mouse click location. How do I take into account if the click is near bottom of browser?

What happens now is the div appears off screen but lets me scroll down more to see div. It works but I'd rather have it smart enough to show entire div no matter where I click on browser screen.

This is what I've learned so far:

 div1.style.top =  (event.clientY + self.pageYOffset) + 'px';
 div1.style.left = (event.clientX + self.pageXOffset) + 'px';

Answer 1

Have a look at Dan's answer on "How to tell if a DOM element is visible in the current viewport?" . He's describing several methods to check if an element is still visible to the user.

For your case this means you could check wether the div to be shown would be visible. Or in case it wouldn't: swop it top/left of the cursor position (and vis-à-vis).