@alterebro

Método de centrado condicional del documento con Javascript.

jueves, marzo 16, 2006 @11:07

El propósito de este script es que cuando el contenido de la página web sea menor a las dimensiones del interior de la ventana del navegador, el contenido del documento se muestre centrado en medio del espacio util y visible del browser. En caso de que el contenido sea mayor al espacio visible, el navegador se comportara normalmente mostrando con las barras de scroll desde el comienzo al final del documento.

<script type="text/javascript">
/* <![CDATA[ */
var css = {
set_style : function( node, rule, value ) {
if ( typeof(node) == 'string' ) node = document.getElementById(node)
node.style[rule] = value
},
get_style : function( node, rule ) {
if ( typeof(node) == 'string' ) node = document.getElementById(node)
if ( rule == 'width' ) return css.get_width(node)
else if ( rule == 'height' ) return css.get_height(node)
else {
if ( window.getComputedStyle ) return window.getComputedStyle( node, null )[rule]
else return node.currentStyle[rule]
}
},
get_height : function( node ) {
if ( typeof(node) == 'string' ) node = document.getElementById(node)
return node.offsetHeight
},
get_width : function( node ) {
if ( typeof(node) == 'string' ) node = document.getElementById(node)
return node.offsetWidth
}
}

var center = {
frame_width : function() {
if (self.innerWidth) return self.innerWidth
else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth
else if (document.body) return document.body.clientWidth
},
frame_height : function() {
if (self.innerWidth) return self.innerHeight
else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientHeight
else if (document.body) return document.body.clientHeight
},
vertical : function(element) {
var element_height = css.get_style(element,'height')
if ( this.frame_height() > element_height ) {
css.set_style(element, 'marginTop', Math.round((this.frame_height()-element_height)/2)+'px')
} else {
css.set_style(element, 'marginTop', '0px')
}
},
horizontal : function(element) {
var element_width = css.get_style(element,'width')
if ( this.frame_width() > element_width ) {
css.set_style(element, 'marginLeft', Math.round((this.frame_width()-element_width)/2)+'px')
} else {
css.set_style(element, 'marginLeft', '0px')
}
},
center_all : function(element) {
this.vertical(element)
this.horizontal(element)
}
}

// Scott Andrew's addEvent
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false)
return true
} else if (obj.attachEvent) {
var r = obj.attachEvent("on"+evType, fn)
return r
} else {
return false
}
}

function vertical_centering() {
center.center_all(document.getElementsByTagName('body')[0])
}

addEvent(window, 'load', vertical_centering);
addEvent(window, 'resize', vertical_centering);
/* ]]> */
</script>

Etiquetas:

0 comentarios

Publicar un comentario

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace