Ejercicio Básico JavaScript: Redimensionar ventana usando resizeBy y moveBy
Ejercicio Básico JavaScript: Redimensionar ventana usando resizeBy y moveBy

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Hoy voy a dejar aquí un ejercicio un tanto estúpido, ya que solo funciona utilizando Explorer como navegador a la hora de ejecutar la página. El ejercicio en si se trata de realizar una página usando el objeto window con JavaScript. La ventana que realicemos se extenderá hasta el total del ancho y alto disponible de de la pantalla. Al alcanzar el tamaño máximo volverá a su posición inicial. Será obligatorio utilizar los métodos resizeBy() y moveBy() tanto para el “estiramiento” como para volver a la posición inicial.

El contenido que la página da un poco igual, ya que no es ese el objetivo del ejercicio. Una vez explicado, aquí va el código. (Seguro que no es la mejor manera ni la más eficiente, pero funciona perfectamente … en explorer, como ya avisé líneas más arriba).

Código para redimensionar ventana usando resizeBy y moveBy con JavaScript

<html>
   <head>
      <title>
         P&aacute;gina con Javascript.
      </title>
      <script language="javascript">
         <!--
//Se determina la proporcion ancho-alto
                 var proporcion=screen.availWidth/screen.availHeight;
//Se determina el ancho y el alto iniciales de la ventana.
                 var alto=150, ancho;
                 ancho=Math.floor(alto*proporcion);
                 if ((ancho%2)==1)
                    ancho+=1;
//Se determina el espacio disponible en la pantalla.
         var anchoDisponible=screen.availWidth, altoDisponible=screen.availHeight;
                 
// En las líneas siguientes se calcula la posición inicial de la ventana.
// Para ello, se resta el tamaño inicial del tamaño disponible, y se divide por dos.
                 var izquierda=(anchoDisponible-ancho)/2;
         var superior=(altoDisponible-alto)/2;
         var ciclos; // Numero de veces que se repetirá el bucle que gestiona la ventana.
 
//En las líneas siguientes se coloca la ventana en su posición y tamaño originales.
         window.moveTo(izquierda, superior);
         window.resizeTo(ancho, alto);
 
                 incremento_arriba=-1;
                 incremento_izquierda=-1;
//incremento_izquierda=incremento_arriba*proporcion;
         incremento_alto=2;
                 incremento_ancho=2;
//               incremento_ancho=incremento_alto*proporcion;
                 
     for (ciclos=1; ciclos<(altoDisponible-alto); ciclos+=2)
         {
            window.moveBy(incremento_izquierda,incremento_arriba);
                        window.resizeBy(incremento_ancho,incremento_alto);        
         }
          for (ciclos=1; ciclos<(anchoDisponible-(ancho+(altoDisponible-alto))); ciclos+=2)
                 {
                    window.moveBy(incremento_izquierda,0);
                        window.resizeBy(incremento_ancho,0);
                 }
                 
                 incremento_abajo=1;
                 incremento_derecha=1;
                 decremento_alto=-2;
                 decremento_ancho=-2;
                 
          for (ciclos=1; ciclos<(anchoDisponible-(ancho+(altoDisponible-alto))); ciclos+=2)
                 {
                    window.moveBy(incremento_derecha,0);
                        window.resizeBy(decremento_ancho,0);
                 }
          for (ciclos=1; ciclos<(altoDisponible-alto); ciclos+=2)
         {
            window.moveBy(incremento_derecha,incremento_abajo);
                        window.resizeBy(decremento_ancho,decremento_alto);        
         }       
         //-->
      </script>
   </head>
   <body>
   </body>
</html>

 







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 0 / 5. Recuento de votos: 0

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.