I have a script which inserts "popup" elements into the DOM. It sets their top and left css properties relative to mouse coordinates on a click event. It works great except that the height of these "popup" elements are variable and some of them extend beyond the viewable area of the browser window. I would like to avoid this.

Here's what I have so far

<script type="text/javascript">
    $(function () {
        $("area").click(function (e) {
            e.preventDefault();

            var offset = $(this).offset();
            var relativeX = e.pageX - offset.left;
            var relativeY = e.pageY - offset.top;

            // 'responseText' is the "popup" HTML fragment
            $.get($(this).attr("href"), function (responseText) {
                $(responseText).css({
                    top: relativeY,
                    left: relativeX
                }).appendTo("#territories");

                // Need to be able to determine
                // viewable area width and height
                // so that I can check if the "popup" 
                // extends beyond.

                $(".popup .close").click(function () {
                    $(this).closest(".popup").remove();
                });
            });
        });
    });
</script>

I have a script which inserts "popup" elements into the DOM. It sets their top and left css properties relative to mouse coordinates on a click event. It works great except that the height of these "popup" elements are variable and some of them extend beyond the viewable area of the browser window. I would like to avoid this.

Here's what I have so far

<script type="text/javascript">
    $(function () {
        $("area").click(function (e) {
            e.preventDefault();

            var offset = $(this).offset();
            var relativeX = e.pageX - offset.left;
            var relativeY = e.pageY - offset.top;

            // 'responseText' is the "popup" HTML fragment
            $.get($(this).attr("href"), function (responseText) {
                $(responseText).css({
                    top: relativeY,
                    left: relativeX
                }).appendTo("#territories");

                // Need to be able to determine
                // viewable area width and height
                // so that I can check if the "popup" 
                // extends beyond.

                $(".popup .close").click(function () {
                    $(this).closest(".popup").remove();
                });
            });
        });
    });
</script>

• javascript
• jquery
• css

Share Improve this question Follow edited Feb 8, 2017 at 14:26 CommunityBot 111 silver badge asked Jun 10, 2010 at 18:11 jessegavinjessegavin 75.7k2828 gold badges140140 silver badges165165 bronze badges 2

• 1 Love the picture -- how would you like to fix it? Make it shorter? Make it simply use it as a border? Flip the other direction? – Kerry Jones Commented Jun 10, 2010 at 18:20
• Basically I just want to 'try' to force all the outer edges of the popup elements to be inside the visible area. For example. If the bottom edge of one of the popups extended beyond the visible area by 50px, I would like to move it -50px towards the top. – jessegavin Commented Jun 10, 2010 at 21:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You would pare the window width/height to the window's scrollTop, scrollLeft, etc.

Here are some methods for you to take a look at:

$(window).width()
$(window).height()
$(window).scrollTop()
$(window).scrollLeft()
$(window).scrollWidth()
$(window).scrollHeight()

Take a look at the jQuery documentation on these methods. Depending on exactly the behavior you want, you'll need to pare the width and position of your popup with the currently visible area of the window, determined with the scroll dimensions.

http://api.jquery./scrollTop/ .. etc

I figured out a solution. I added the following code in the place of my 4 line ment in the original question.

var diffY = (popup.offset().top + popup.outerHeight(true)) - $(window).height();
if (diffY > 0) {
  popup.css({ top: relativeY - diffY });
}

var diffX = (popup.offset().left + popup.outerWidth(true)) - $(window).width();
if (diffX > 0) {
  popup.css({ left: relativeX - diffX });
}

@liquidleaf pointed me in the right direction, so +1 and thanks for that.