CODEWITHSUNDEEP
javascriptjquery
Hendrik Brummermann
Hendrik Brummermann

Reputation: 8312

How to center a popup-div below the mouse cursor but keep it completely inside the window?

i am trying to display a popup-div below the mouse cursor, but it should be completely inside the visible area. Display the div below the mouse cursor worked:

var popupHeight = $("#popup").height();
var popupWidth = $("#popup").width();
$("#popup").css({
    "position" : "absolute",
    "top" : lastClickPosition.pageY - (popupHeight/2),
    "left" : lastClickPosition.pageX - (popupWidth/2))
});

The problem with this simple approach is that the popup-div may be partly outside the screen. So I tried to calculate the minimal and maximal offsets for it to stay within the screen: 

Math.min(Math.max(0, lastClickPosition.pageY - (popupHeight/2)), 
         windowHeight - popupHeight - 20)+"px"

But this approach fails after the page was scrolled down because pageX/Y is relative to the page and not visible part.

Any other ideas?

Upvotes: 1

Views: 1951

Answers (1)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

You need to add in the scrollTop of the window. See scrollTop

$(window).scrollTop(); // this is the scroll distance from the top

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

Upvotes: 2

Related Questions