Calcular ancho del navegador con jQuery para crear cajas

Para crear cajas, o cualquier otro elemento al que necesitemos darle justamente el ancho (o alto) del viewport (o lo que el usuario ve en su navegador). El principal problema reside cuando queremos crear cajas, en este caso, que sean el 100% del ancho del navegador como contenedores y su posición es fija ( position: fixed ). La solución pasa por usar jQuery en este caso para saber el ancho de la ventana, y posteriormente asignar ese valor a la propiedad width de CSS del elemento, ya que el 100% de ancho no siempre funciona según el posicionado de los elementos en las hojas de estilo en cascada. Veamos pues como crear una caja para la cabecera en este caso que solucione este problema:

[code lang=”css”]

#contender_cabecera
{
position:fixed;
height:64px;;
background-color:#cf0;
width: 1000px; /* Asignamos ancho arbitrario */
}
[/code]
[html]

[/html]

Y ahora, el código javascript con jQuery:

[javascript]
$(document).ready(function{

var ancho_ventana = $(window).width() /* Sacamos el ancho de la ventana, no del documento $(document) */
$(“#contenedor_cabecera”).css({“width”: ancho_ventana});

});
[/javascript]

Ahora, ya tendriamos la caja #contenedor_cabecera con el ancho exacto de la ventana del navegador, pero sólo con ese código tendríamos un problema: cuando el usuario redimensione la ventana, la caja no se ajustará al nuevo ancho. Para solucionar esto bastará con que llamemos al evento .resize() de jQuery que se activa al redimensionar la ventana. El código completo quedaría así:

[code lang=”javascript”]
$(document).ready(function{

var ancho_ventana = $(window).width() /* Sacamos el ancho de la ventana, no del documento $(document) */
$(“#contenedor_cabecera”).css({“width”: ancho_ventana});

$(window).resize(function(){

var ancho_ventana = $(window).width()
$(“#contenedor_cabecera”).css({“width”: ancho_ventana});

});

});
[/code]

¿Tienes alguna duda? ¿Alguna optimización? Deja un comentario más abajo con tu opinión 🙂

Más tutoriales con jQuery:

TUTORIAL: TOOLTIPS CON CONTENIDO DINÁMICO EN JQUERY Y PHP (SIN PLUGINS)