Posicionar un DIV en la mitad de la pantalla visible

Jueves 15, Noviembre 2007

Archivado en: Informática, Programación — Etiquetas: , , , — admin @ 3:25 am

Me he encontrado en muchas situaciones en las que he necesitado situar un div en mitad de la pantalla, independientemente de que el usuario haya utilizado el scroll para bajar miles de pixeles más abajo o se encuentre al principio de la página.Frecuentemente he tenido problemas para hacer esto, especialmente debido a la incompatibilidad entre navegadores. Un acercamiento a esta solución podría ser el siguiente:

function centrar(elementoid) {

xpos = (screen.availWidth/3)
ypos = (screen.availHeight/3)

elementoid.style.top = (document.documentElement.scrollTop+ypos) + ‘px’;
elementoid.style.left = (document.documentElement.scrollLeft)+xpos + ‘px’;
elementoid.style.visibility=’visible’;
}

Almacenamos en xpos y en ypos las posiciones de la superficie visible de pantalla dividido entre 3, para intentar centrarlo salvando la anchura del propio objeto. Esto no es exacto y se podría hacer un cálculo obteniedo la altura y anchura del objeto. Hecho esto colocamos el div vertical y horizontalmente en la página obteniendo el lugar hasta donde el usuario se ha desplazado haciendo scroll y le sumamos el valor xpos e ypos para centrarlo.

Quizá haya formas mejores, pero esta es sencilla y funciona en firefox y en iexplorer.





Sin Comentarios »

Aún no hay comentarios.

Suscripción RSS a los comentarios de esta entrada. TrackBack URL

Dejar un comentario

Disculpa, debes iniciar sesión para escribir un comentario.



Crea regalos personalizados en Zazzle.

caphotodesign