Как заставить расположенные элементы оставаться в видимой области браузера?

Question

У меня есть скрипт, который вставляет всплывающие элементы в DOM. Он устанавливает их свойства top и left css относительно координат мыши в событии щелчка. Он прекрасно работает, за исключением того, что высота этих «всплывающих» элементов является переменной, и некоторые из них выходят за пределы видимой области окна браузера. Я хотел бы избежать этого.

Вот что у меня есть

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

Answer 1

Вы бы сравнили ширину / высоту окна с scrollTop, scrollLeft и т. Д.

Вот несколько способов взглянуть на:

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

Посмотрите на документацию jQuery по этим методам. В зависимости от того, какое именно поведение вы хотите, вам нужно сравнить ширину и положение вашего всплывающего окна с видимой в данный момент областью окна, определенной с помощью размеров прокрутки.

http://api.jquery.com/scrollTop/ .. и т. Д.

Answer 2

Я нашел решение.Я добавил следующий код вместо моего 4-строчного комментария в исходном вопросе.

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 указал мне правильное направление, поэтому +1 и спасибо за это.