@alterebro

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: javascript