1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Tutorial JavaScript: Centrar Ventana PopUp

Tema en 'Tutoriales Desarrollo Web' iniciado por elQuique, 3 Mar 2006.

  1. elQuique

    elQuique Usuario activo

    Sorry por la demora estos dias no me han dejado mover mis dedos hasta esta ventanita jaja..

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

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <html>
    <head>
    </head>
    <body>
    &nbsp;&nbsp; Hola a todo FC
    </body>
    </html>
    <!--c2--></div><!--ec2-->

    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:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <html>
    <head>
    &nbsp;&nbsp;<script language="JavaScript">
    &nbsp;&nbsp; function posicion(){
    &nbsp;&nbsp;&nbsp;&nbsp;moveTo(0, 0);
    &nbsp;&nbsp; }
    &nbsp;&nbsp;</script>
    </head>
    <body onload="posicion()">
    &nbsp;&nbsp; Hola a todo FC
    </body>
    </html>
    <!--c2--></div><!--ec2-->

    hemos agregado la funcion posicion que lo que hace es moverlo a la parte superior izquierda (0, 0) por medio de la orde JS <b>moveTo</b> y esta orden se llama cuando se carga la pagina html, debido a que hemos colocado su llamado en el evento <b>onload</b> del body html ( <body onload="amplia()"> ).

    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 <b>screen.width</b> 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

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    <html>
    <head>
    &nbsp;&nbsp;<script language="JavaScript">
    &nbsp;&nbsp; function posicion(){
    &nbsp;&nbsp;&nbsp;&nbsp;x = (screen.width - 300) / 2;
    &nbsp;&nbsp;&nbsp;&nbsp;moveTo(x, 0);
    &nbsp;&nbsp; }
    &nbsp;&nbsp;</script>
    </head>
    <body onload="posicion()">
    &nbsp;&nbsp; Hola a todo FC
    </body>
    </html>
    <!--c2--></div><!--ec2-->

    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

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    &nbsp;&nbsp;&nbsp;&nbsp;x = (screen.width - 300) / 2;
    &nbsp;&nbsp;&nbsp;&nbsp;y = (screen.height - 200) / 2;
    &nbsp;&nbsp;&nbsp;&nbsp;moveTo(x, y);
    <!--c2--></div><!--ec2-->
    tomando que el alto fuera 200
     
    elQuique, 3 Mar 2006
    #1
  2. Anunciante

    Anunciante

     
  3. elQuique

    elQuique Usuario activo

    Si quieren verlo funcionando pueden hacerlo aca

    <a href="http://www.forocreativo.net/tutoriales/javascript/centrarventana/" target="_blank">http://www.forocreativo.net/tutoriales/jav...centrarventana/</a>

    dando click en los vinculos junto a la explicacion :)

    Saludos
     
    elQuique, 3 Mar 2006
    #2
  4. kitsch

    kitsch Nuevo usuario

    Genial!! Foro creativo siempre a la orden en las preguntas frecuetes!!!

    Por cierto, todo bonito y super bien el tuto, pero no va en esta seccion... jejeje; lo muevo a donde va a <b><a href="http://www.forocreativo.net/ipb/index.php?showforum=23" target="_blank">Tutoriales</b> Tecnologia Web</a>; aunque seas el jefe, la moderacion aplica parejo ;)
     
    kitsch, 3 Mar 2006
    #3
  5. mack

    mack Nuevo usuario

    JAJAJAJAJAJA

    ANDELE no que muy salsa quique JAJAJA ya todos le estan perdiendo el respeto empesando por DRAK que le iso el retoque JAJAJA
     
    mack, 3 Mar 2006
    #4
  6. Faraon

    Faraon Supremo Egipcio

    jajajja esta bueno eso javier, aplicando la grua por parquear mal al jefe jejjejeje

    Excelente quique el tutorial.

    Abrazos
     
    Faraon, 3 Mar 2006
    #5
  7. elQuique

    elQuique Usuario activo

    <!--quoteo(post=88778:date=Mar 3 2006, 07:17 PM:name=kitsch)--><div class='quotetop'>CITA(kitsch @ Mar 3 2006, 07:17 PM) [snapback]88778[/snapback]</div><div class='quotemain'><!--quotec-->
    Genial!! Foro creativo siempre a la orden en las preguntas frecuetes!!!

    Por cierto, todo bonito y super bien el tuto, pero no va en esta seccion... jejeje; lo muevo a donde va a <b><a href="http://www.forocreativo.net/ipb/index.php?showforum=23" target="_blank">Tutoriales</b> Tecnologia Web</a>; aunque seas el jefe, la moderacion aplica parejo ;)
    <!--QuoteEnd--></div><!--QuoteEEnd-->


    Lo hice para ver quien era el mas correcto de los moderadores y hacia primar las reglas del foro por sobre todo, felicitacion kitsch !!!

    gracias



    pd: mentira jaja de puro burro nomas y apurado tenia 15 min y lo meti sin pensarlo :)
     
    elQuique, 3 Mar 2006
    #6
  8. kitsch

    kitsch Nuevo usuario

    :D :D
     
    kitsch, 3 Mar 2006
    #7
  9. adi

    adi Zen Moderator

    Jaja, ta' muy bueno quique, gracias :D
     
    adi, 4 Mar 2006
    #8
  10. akhkham

    akhkham No hay tarea tan simple que no pueda hacerse mal

    Gracias elquique, muy buen tutorial
     
    akhkham, 5 Mar 2006
    #9
  11. RBZ

    RBZ Usuario activo

    :unsure: ¿Por qué se abren dos ventanas?. He probado el script de la dirección de pruebas (<a href="http://www.forocreativo.net/tutoriales/javascript/centrarventana/" target="_blank">este</a>) y se abren dos ventanas cada vez. La pequeña y otra vez la del ejemplo.
     
    RBZ, 11 Jul 2006
    #10
  12. Sette

    Sette Nuevo usuario

    pues lo he aplicado en un mac, y nada de nada, si abre otra ventana, pero a tamaño completo, no se si lo centra o no, como le doyy tamaño al popup?
     
    Sette, 26 Jun 2008
    #11
  13. elQuique

    elQuique Usuario activo

    No sabia que Mac ya pudiera abrir webs :p
     
    elQuique, 26 Jun 2008
    #12


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·