Cómo hacer que un DIV llene la página

Escrito por kevin lee | Traducido por elizabeth garay ruiz
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer que un DIV llene la página
Si has visto efectos de "caja de luz" en una página de la red, probablemente has sido testigo de un elemento DIV maximizado que llene la página. (Ryan McVay/Photodisc/Getty Images)

Si has visto efectos de "caja de luz" en una página de la red, probablemente has sido testigo de un elemento DIV maximizado que llene la página. Las cajas de luz con frecuencia causan que las páginas de la red se atenúen con un clic del botón. Una ventana que surja conteniendo un formulario puede aparecer después de que haces clic al botón. Los elementos DIV son candidatos ideales para las cajas de luz porque puedes colocar otros elementos dentro de ellos. Para intentar crear páginas llenas de DIV, agrega la función JavaScript a tu código que altera la dimensión de un elemento DIV.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un documento de página de la red usando Notepad o un editor HTML. Pega el siguiente código en la sección del cuerpo de los documentos:

    <div id="myDIV1" class="hide"> Div Contents <<input id="Button2" type="button" value="Hide DIV" onclick="manageDIV('myDIV1','hide')" /> </div>

    <<input id="Button1" type="button" value="Fill Page" onclick="manageDIV('myDIV1','big')" />

    Esto crea un div cuyo id es "myDIV1". El DIV referencia la clase CSS llamada "hide" (Ocultar). El botón dentro del div pasa la palabra "hide" a una función JavaScript. El botón "Fill Page" (Llenar página) fuera del DIV pasa la palabra "big" (grande) de la función.

  2. 2

    Agrega la siguiente clase CSS a la sección de encabezado de la página como se muestra aquí:

    <style type="text/css"> .big { visibility:visible; position: absolute; display:block; top: 0; left:0; height: 100%; width: 100%; background-color: yellow; }

    .hide { visibility:hidden; position: absolute; display:block; top: 0; left:0; height: 100%; width: 100%; background-color: yellow; } </style>

    La clase ".big" cambia los ajustes del DIV al encabezado del alto y ancho al 100% del DIV. Esto provoca que el DIV llene la página. El fondo amarillo ayuda a poder ver el DIV cuando se examine. la clase “.hide” establece la visibilidad DIV’s para “hidden” (Ocultar).

  3. 3

    Pega el siguiente código en la sección de script del documento:

    function manageDIV(div, className) {

    var divObj = document.getElementById(div); divObj.className = className;

    }

    Esta función JavaScript corre cuando hace clic en uno de los botones. El código asigna la clase “.big” o “.hide” al DIV dependiendo del botón oprimido.

  4. 4

    Guarda tu documento y velo en el navegador. Haz clic en el botón "Fill Page" (Llenar página). El DIV amarillo llena la página. Haz clic en el botón "Hide DIV" (Ocultar DIV). El DIV desaparece.

Consejos y advertencias

  • Este ejemplo muestra un simple efecto de caja de luz usando el color amarillo. Coloca un GIF semitransparente dentro del DIV si quieres crear un efecto de caja de luz más apagado. Puedes maximizar un DIV también por otras razones. Quizás quieras mostrar una pantalla completa de fotos que bloqueen todo lo demás en la página. Simplemente coloca esas fotos dentro del DIV y llenarán también la página.
  • Fíjate que el botón "Hide DIV" (Ocultar DIV) aparece dentro del DIV. Si no estuviera ahí, los usuarios no podrían hacer clic en ese botón para hace que el DIV desaparezca porque el DIV cubre todo en la página de la red cuando se maximiza.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles