Uninstallme

Supongamos que tenemos las típicas capas emergentes que aparecen al lado de un enlace o icono de ayuda al clicarlo.

Ejemplo de capa emergente que aparece al hacer click sobre un icono de ayuda

Uno de nuestros objetivos es que estas capas siempre aparezcan en el área visible de la ventana del navegador, por lo que, según la posición del enlace que las muestra (más o menos cercano al final de la ventana), deberemos calcular su posición para evitar que puedan aparecer cortadas.

Ejemplo de capa cortada por la ventana del navegador

La librería Prototype nos ofrece unos cuantos métodos para que esta tarea sea más fácil, pero antes de darle demasiadas vueltas (yo por lo menos se las di…), lo mejor es hacerse un esquema.

document.viewport.getScrollOffsets()[1]

Devuelve el espacio no visible por encima del área visible (viewport) del documento.

element.cumulativeOffset()[1]

Devuelve la posición top (posición Y) del elemento, en este caso la capa emergente, respecto al documento.

document.viewport.getDimensions().height

Devuelve la altura del área visible de la ventana del navegador.

element.offsetHeight

Devuelve la altura completa del elemento (la capa emergente)

Con estos datos ya tenemos todo lo que necesitamos para saber si la capa emergente podrá mostrarse parcialmente fuera del área visible de la ventana del navegador. Paso a paso…

1. Si a la posición top del elemento (element.cumulativeOffset()[1])  le restamos el espacio no visible por arriba (document.viewport.getScrollOffsets()[1]) obtenemos la posición top del elemento respecto al área visible.
2. Si a esta resta le sumamos la altura del elemento, obtendremos la posición Y del borde inferior de la capa emergente.
3. Si esta medida es mayor que el área visible del documento (document.viewport.getDimensions().height), nuestra capa emergente aparecerá cortada.

Una vez que sabemos cuándo va a aparecer cortada la capa emergente, podemos evitarlo modificando su posición top respecto al documento de la siguiente manera:

Posición top de la capa = altura área visible del navegador + altura del espacio no visible por encima del área visible – altura de la capa.

El código Javascript encargado de hacer todo esto sería:

// posicionTop se ha obtenido previamente mediante element.cumulativeOffset()[1]
// capa hace referencia a la capa emergente (element)

posicionarCapaEnAreaVisible: function(posicionTop, capa){
   var posicionRespectoViewport = posicionTop - document.viewport.getScrollOffsets()[1] + capa.offsetHeight;
   if(posicionRespectoViewport > document.viewport.getDimensions().height){
      posicionTop = document.viewport.getDimensions().height + document.viewport.getScrollOffsets()[1] - capa.offsetHeight;
   }
   return posicionTop;
}

Supongo que habrá formas más sencillas de hacer lo mismo, y para quien lo quiera “listo para llevar”, siempre le puede echar un vistazo a las capas emergentes y tooltips personalizables de Prototip.

Más información

• Documentación sobre Element de Prototype
• Documentación sobre document.viewport de Prototype