Obtener el Alto y el Ancho del Navegador con jQuery

A veces cuando estamos muy metidos desarrollando un proyecto web, necesitamos obtener las medidas de la ventana del Navegador por algun motivo.
En este Tutorial les voy a mostrar como podemos obtener el Ancho y el Alto de la ventana de nuestro navegador con el framework jQuery.

Utilizaremos las funciones .width() y .height().

Comencemos:

Paso 1:

Primero hacemos referencia a nuestro archivo del framework jQuery, colocamos antes de la etiqueta < / head >, lo siguiente:

src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"

Paso 2:

Ahora le damos un poco estilos CSS:

body{padding:20px;} 
.btncls{padding: 10px; background-color:#000; color:#fff; border:none; cursor:pointer; margin:10px;} 
.txtcls{color:#44f; font-size:20px;} 

Paso 3:

Ahora creamos nuestros 2 botones uno para obtener el ancho y otro para obtener el alto de nuestra ventana. Asi mismo crearemos 2 capas, uno para mostrar el ancho y otro para mostrar el alto.

<button class="btncls" id="obtan">Obtener ancho</button> 
<button class="btncls" id="obtal">Obtener alto</button> 
<div class="txtcls" id="anvent"> </div>
<div class="txtcls" id="alvent"> </div> 

Paso 4:

Ahora creamos nuestras funciones, una para obtener el ancho y otra para obtener el alto:


<!-- Funcion para obtener el Ancho(Height) --> 
function obtenerAncho( obj, ancho ) {
$( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}
$("#obtan").click(function() {
obtenerAncho( "ventana", $( window ).width() );
});
<!-- Funcion para obtener el Alto(Height) --> 
function obtenerAlto( obj, alto ) {
$( "#alvent" ).text( "El alto de la " + obj + " es " + alto + "px. (Height)" );
}
$( "#obtal" ).click(function() {
obtenerAlto( "ventana", $( window ).height() );
});

Listo !

Eso es todo, les dejo una demo:
DEMO

En la Demo Puedes jugar con la ventana del navegador, estíralo y dale mas alto o mas ancho, para ver sus medidas, tanto el ancho como el alto, como gustes.
Ademas en la Demo pueden ver el código fuente de este tutorial solo le dan botón derecho del mouse y luego en la opción de ver código fuente.

Comentarios

Entradas populares