Question

I have a “box” popup that appears on mouseover for some links. The box is about 300px tall and the top side of the box is on the same level as the link position, however some of these links are at the lowest scrollable part of the page, thus the popup will be cut off.

Question
What values are used to detect the bottom of the page, or remaining scrollable distance to the bottom so that you can shift the popup as required?

I’m using jQuery, but a generic JavaScript solution is also welcome for reference.

Thank you.

Answer 1

Basically you want to find the bottom of the viewport relative to the document, and then compare them to the coordinates of the incoming event.

function handler(event) {
    var bottomOfViewport = $(window).scrollTop() + $(window).height();
    var bottomOfBox = event.pageY + HEIGHT_OF_BOX;
    if ( bottomOfViewport < bottomOfBox )
        // code to handle overflow condition
}

Thankfully, the pageX and pageY properties are relative to the document. Similar holds for the x-axis.