|
Tutorial por Jorge Oyhenard (elQuique) de Taller Webmaster
TUTORIALES JAVASCRIPT
Centrar Ventana PopUp
por elQuique
Bien javascript es un lenguaje a nivel de cliente esto es que a diferencia de PHP que se ejecuta en el servidor el JS se ejecuta en el browser de quien esta mirando la pagina web en ese momento.
Eso es justo lo que necesitamos para este caso smile.gif ya que debemos hacer que en cada pantalla segun su medida centre la ventana.
Tu ya debes tener de hecho un JS que llame a tu popup, en este caso nos centraremos en el html y JS de tu ventana o sea la que se abre.
Debes tener algo como
Hola a todo FC
que se abre con el tamaño indicado por la orden window de tu rutina de popup.
a ese html que por supuesto debe ser mas grande le vamos a agregar un JS. Por ejemplo este:
Hola a todo FC
hemos agregado la funcion posicion que lo que hace es moverlo a la parte superior izquierda (0, 0) por medio de la orde JS moveTo y esta orden se llama cuando se carga la pagina html, debido a que hemos colocado su llamado en el evento onload del body html ( ).
La diferencia esta en que tu quieres centarlo, eso quiere decir que debe quedar un espacio IGUAL a ambos lado de tu ventana. O sea que dicho de otra forma del ancho total de tu pantalla le debe sobrar el mismo espacio en ambos lados de tu ventana.
Por ejemplo si la pantalla mide 800x600 y tu ventana 300px de ancho debe dejar (800 - 300) / 2 para cada lado = 250 ok ??
Ancho de la Pantalla - Ancho (es el espacio sobrante total) a eso lo dividimos entre 2, / 2 (porque es para ambos 2 lados)
Ahora un pequeño problema, quien mire tu web tendra 800 o 1024 o 1280 ??? Por suerte JS tiene una funcion que soluciona esto y nos dice el tamaño se llama screen.width traducido al español pantalla ancho
Cambiemos nuestra formula entonces asi
(screen.width - AnchoVentana) / 2
por tanto si queremos que quede centrada horizontal nuestra pagina deberia ser asi
Hola a todo FC
Use una variable llamda x para que quede mas facil de razonar y como AnchoVentana he colocadola cantidad fija 300 que es el supuesto ancho de tu ventana si no es asi lo cambias
Listo cualquier duda a las ordenes
pd: si quieren centrado vertical agregan
x = (screen.width - 300) / 2;
y = (screen.height - 200) / 2;
moveTo(x, y);
tomando que el alto fuera 200
Lo pueden ver funcionando aquí
Espero les sirva, saludos |
