3

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';
Rod
  • 14,529
  • 31
  • 118
  • 230
  • 1
    You will need the height of your div and you will need the height of your window, then some simple 3rd grade math skills. – iGanja Aug 09 '13 at 04:45

1 Answers1

0

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).

Community
  • 1
  • 1
pex
  • 7,351
  • 4
  • 32
  • 41