Jak wymusić umieszczenie elementów na widocznym obszarze przeglądarki?

Question

Mam skrypt, który wstawia elementy "popup" do DOM. Ustawia ich właściwości css w stosunku do współrzędnych myszy w zdarzeniu kliknięcia. Działa to świetnie, z wyjątkiem tego, że wysokość tych elementów "popup" jest zmienna, a niektóre z nich wykraczają poza widoczny obszar okna przeglądarki. Chciałbym tego uniknąć.

Oto co mam tak daleko

<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

I zdobione roztworu. Dodałem następujący kod w miejsce mojego 4-liniowego komentarza w oryginalnym pytaniu.

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 wskazał mi w dobrym kierunku, więc +1 i dzięki za to.

Answer 2

Można by porównać okno szerokość/wysokość do okna scrollTop, scrollLeft itp

Oto kilka sposobów, aby spójrz na:

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

Spójrz na dokumentacja jQuery dotycząca tych metod. W zależności od pożądanego zachowania musisz porównać szerokość i pozycję swojego wyskakującego okienka z aktualnie widocznym obszarem okna, określanym wymiarami przewijania.

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