@alterebro

Centrado horizontal y vertical de una capa o elemento con Javascript.

sábado, enero 29, 2005 @13:21

Este script arregla el problema de los elementos que quedan ocultos en el navegador cuando estos son centrados usando una posición absoluta con margenes negativos.
Probado sobre diferentes maquinas y navegadores, sin problemas por ahora en ninguna configuración excepto en Internet Explorer 5.1 sobre Macintosh donde el navegador cierra inesperadamente.
En la página de Gucci (www.gucci.com) se puede ver un enfoque diferente pero similar al que he seguido en esta función, aprovechando tambien el código para obtener las dimensiones interiores del documento de QuirksMode (Quirks Mode Viewport).

Como parametro de la función estará el id correspondiente a la capa o elemento HTML que queremos centrar. En este caso seria el elemento con id holder.

function getCenter(where) {
var ww,wh;
if (self.innerHeight) {
ww=self.innerWidth; wh=self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
ww=document.documentElement.clientWidth;
wh=document.documentElement.clientHeight;
} else if (document.body) {
ww=document.body.clientWidth;
wh=document.body.clientHeight;
}
var layer = document.getElementById(where);
if ( wh<layer.offsetHeight || ww<layer.offsetWidth ) {
with (layer.style) {
position = 'absolute';
if ( wh < layer.offsetHeight ) {
top='0px';
marginTop='0px';
left='50%';
marginLeft = (-Math.round(layer.offsetWidth/2)+'px');
}
if ( ww < layer.offsetWidth ) {
left='0px';
marginLeft='0px';
top='50%';
marginTop=(-Math.round(layer.offsetHeight/2)+'px');
}
if ( wh < layer.offsetHeight && ww < layer.offsetWidth ) {
left='0px';
marginLeft='0px';
top='0px';
marginTop='0px';
}
document.getElementsByTagName('html')[0].style.overflow = 'auto';
}
} else {
with (layer.style) {
position = 'absolute'; top = '50%'; left = '50%';
marginTop = -Math.round(layer.offsetHeight/2)+'px';
marginLeft = -Math.round(layer.offsetWidth/2)+'px';
document.getElementsByTagName('html')[0].style.overflow = 'hidden';
}
}
}
window.onresize = function() { getCenter('holder'); }
window.onload = window.onresize;

Etiquetas: ,

0 comentarios

Publicar un comentario

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace