¿Cómo forzar a los elementos posicionados a permanecer dentro del área visible del navegador?

Question

Tengo un script que inserta elementos "emergentes" en el DOM. Establece sus propiedades top y left css en relación con las coordenadas del mouse en un evento de clic. Funciona muy bien, excepto que la altura de estos elementos "emergentes" es variable y algunos de ellos se extienden más allá del área visible de la ventana del navegador. Me gustaría evitar esto.

Esto es lo que tengo hasta ahora

<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

me di cuenta de una solución. Agregué el siguiente código en el lugar de mi comentario de 4 líneas en la pregunta original.

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 me señaló en la dirección correcta, por lo que 1 y gracias por eso.

Answer 2

Usted compararía la ventana de anchura/altura a la de la ventana scrollTop, scrollLeft, etc.

Aquí están algunos métodos para que usted pueda échele un vistazo a:

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

Eche un vistazo a la documentación jQuery sobre estos métodos. Dependiendo exactamente del comportamiento que desee, deberá comparar el ancho y la posición de su ventana emergente con el área actualmente visible de la ventana, determinada con las dimensiones de desplazamiento.

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