Escrito por Yosi_ el jueves, 24 de enero de 2008
El código que pongo a continuación es una función JavaScript cuya utilidad es situar un "div" verticalmente en un punto concreto de la pantalla, independientemente del scroll de la página. En mi caso lo he utilizado para crear un popup (dentro de la propia web, sin utilizar una nueva ventana) que muestra entre otras cosas el formulario de login de este blog.
El parámetro div de la función corresponde a la id del elemento que se desea posicionar, y siempre deberemos tener en cuenta que dicha posición se establecerá respecto a la parte superior del mismo. En este caso se colocará a 1/3 de la altura total de la pantalla (altoActual/3), pero se podria mover a cualquier otro sitio cambiando ese valor, o incluso centrarlo colocándolo a 1/2 de la altura y restando a la cantidad resultante la mitad de la altura del elemento.
Evidentemente sería muy sencillo realizar esta misma labor empleando solamente la propiedad "position:fixed" en CSS, pero dado que IE6 no la soporta, y teniendo en cuenta que desgraciadamente un alto porcentaje de internautas aún usa ese despropósito de navegador, nos vemos obligados a utilizar soluciones más complejas como la expuesta anteriormente. Para el caso de la posición en el eje horizontal la funcion sería análoga, pero en ese caso es más inteligente establecerla desde CSS mediante la propiedad "position:absolute", ya que al carecer la mayor parte de webs de scroll horizontal, es equivalente a fijar el elemento en un determinado punto.
function setFixedHeight (div)
{
div=document.getElementById(div);
if(window.innerHeight)
{
altoActual = window.innerHeight;
}
else
{
altoActual = document.documentElement.clientHeight;
}
alto = (altoActual/3)+document.documentElement.scrollTop;
div.style.top = alto+ 'px';
}
El parámetro div de la función corresponde a la id del elemento que se desea posicionar, y siempre deberemos tener en cuenta que dicha posición se establecerá respecto a la parte superior del mismo. En este caso se colocará a 1/3 de la altura total de la pantalla (altoActual/3), pero se podria mover a cualquier otro sitio cambiando ese valor, o incluso centrarlo colocándolo a 1/2 de la altura y restando a la cantidad resultante la mitad de la altura del elemento.
Evidentemente sería muy sencillo realizar esta misma labor empleando solamente la propiedad "position:fixed" en CSS, pero dado que IE6 no la soporta, y teniendo en cuenta que desgraciadamente un alto porcentaje de internautas aún usa ese despropósito de navegador, nos vemos obligados a utilizar soluciones más complejas como la expuesta anteriormente. Para el caso de la posición en el eje horizontal la funcion sería análoga, pero en ese caso es más inteligente establecerla desde CSS mediante la propiedad "position:absolute", ya que al carecer la mayor parte de webs de scroll horizontal, es equivalente a fijar el elemento en un determinado punto.
Ver Comentarios (67)
Temas relacionados:
Internet
Programación
JavaScript
