El blog del Staff/Stuff de Sync.es aportando nuestras ideas al mundo

Javascript: Centrar una capa dentro de la zona visible de la ventana

Volviendo de nuevo al tema de la programación web, quería mostrar ahora un código que resuelve el problema de centrar un elemento de tu página web en la zona visible de la ventana.

El problema de centrar un elemento implica saber el tamaño total de la página visible, no de tu pantalla, sino de la página que estás viendo, desde la cabecera hasta el pie de la misma. Una vez que tenemos la altura y la anchura total de la página, tenemos que saber que zona de la misma estamos visualizando y dentro de esa zona, buscar el punto medio para centrar nuestro elemento.

Punto central visible

Una aplicación típica de algo así sería el mostrar una ventanita en medio de la pantalla cuando se pulsa algún botón, y concretamente por ejemplo, mostrar un reproductor con un video, una canción, una imagen, etc. Algo parecido al típico lightbox, pero muy light.

¿Para qué queremos cargar todo un jquery o un mootools cuando lo único que queremos hacer es que aparezca la capa en el centro de la pantalla?

Antes de poneros el código, deciros que el localizar el tamaño y punto central de una página es un tema que suele ser diferente según que navegador web, y depende en muchos casos del DOCTYPE utilizado. Las funciones javascript que os paso funcionan en cualquier navegador. Las he utilizado bastante y si queréis visitar la web de donde los he conseguido simplemente hacer clic aquí

A continuación os dejo el código y un ejemplo práctico mío:

/* En el fichero centrar.js guardamos estas funciones */

/**
* Función que calcula el tamaño de la ventana
*
*/
window.size = function(){
   var w = 0;
   var h = 0;
   //IE
   if(!window.innerWidth){
      //strict mode
      if(!(document.documentElement.clientWidth == 0)){
         w = document.documentElement.clientWidth;
         h = document.documentElement.clientHeight;
      }
      //quirks mode
      else{
         w = document.body.clientWidth;
         h = document.body.clientHeight;
      }
   }
   //w3c
   else{
      w = window.innerWidth;
      h = window.innerHeight;
   }
   return {width:w,height:h};
}

/**
* Función que calcula el centro de la ventana actual o de un rectángulo de
* las dimensiones que se le pasen, devuelve el vértice superior izquierdo
*
*/
window.center = function(){
   var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
   var _x = 0;
   var _y = 0;
   var offsetX = 0;
   var offsetY = 0;
   //IE
   if(!window.pageYOffset){
      //strict mode
      if(!(document.documentElement.scrollTop == 0)){
         offsetY = document.documentElement.scrollTop;
         offsetX = document.documentElement.scrollLeft;
      }
      //quirks mode
      else{
         offsetY = document.body.scrollTop;
         offsetX = document.body.scrollLeft;
      }
   }
   //w3c
   else{
      offsetX = window.pageXOffset;
      offsetY = window.pageYOffset;
   }
   _x = ((this.size().width-hWnd.width)/2)+offsetX;
   _y = ((this.size().height-hWnd.height)/2)+offsetY;
   return{x:_x,y:_y};
}

/**
* Aplicación básica: Función "mostrarCapaCentro" que centra una capa de la cual
* sabemos el tamaño en medio de la zona visible de la página
* La capa tiene que tener estilo:
* position:absolute;display:none; z-index: Por encima de todas las capas.
* La función coge como parámetro el identificador de la capa a posicionar
*/

<! HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Mi página con capa centrada</title>
	<script type="text/javascript" src="centrar.js"></script>
	<script type="text/javascript">

		function mostrarCapaCentro(capaId)
		{
			var miCapa = document.getElementById(capaId);
			if (miCapa){
			    var punto = window.center({width:400,height:400});
/* como la capa es de 400x400 en punto nos devuelve la esquina superior
izquierda centrada.*/
                            miCapa.style.top = punto.y + "px";
//centro la capa en el eje y
                            miCapa.style.left = punto.x + "px";
//centro la capa en el eje x
                            miCapa.style.display="block";
//muestro la capa
 			}
		}

	</script>
</head>
<body>
        <style>
           #lacapaquecentro{
              position:absolute;
              z-index:1000;
              display:none;
              width:400;
              height:400;
              color:red;
              background-color:blue;
           }
        </style>
	<div id="lacapaquecentro">Hola mundo</div>
	<input type="button" value="Muestra la capa en el centro"
onclick="mostrarCapaCentro('lacapaquecentro')"/>
</body>
</html> 

Bueno, eso es todo, espero que os sirva como me ha servido a mi, hasta la próxima.

También te puede interesar: