¿Cómo obtener el alto y el ancho de la ventana del navegador automáticamente con jQuery cuando se cambia?

publicado por: Anonymous

¿Cómo puedo obtener el alto y el ancho automáticamente? Es decir, al cambiar el ancho o el alto de la ventana del navegador, que automáticamente se cambie los valores o automáticamente se den los valores al cambiar el tamaño de la ventana del navegador.

Quiero mostrar los datos automáticamente sin tener que realizar la acción de presionar los botones para obtener los datos.

_x000D_

_x000D_

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

_x000D_

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

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<button class="btncls" id="obtan">Obtener ancho</button>_x000D_
<button class="btncls" id="obtal">Obtener alto</button>_x000D_
<div class="txtcls" id="anvent">&nbsp;</div>_x000D_
<div class="txtcls" id="alvent">&nbsp;</div>

_x000D_

_x000D_

_x000D_

solución

lo mas indicado seria utilizar las media-querys, https://developer.mozilla.org/es/docs/CSS/Media_queries

resolviendo tu problema te dejo una modificacion funcional de tu codigo

_x000D_

_x000D_

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

_x000D_

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

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="txtcls" id="anvent">&nbsp;</div>_x000D_
<div class="txtcls" id="alvent">&nbsp;</div>

_x000D_

_x000D_

_x000D_

te dejo el mismo ejemplo en jsFiddle

https://jsfiddle.net/rn3w/40gLkmfg/

Adicionando:

para los diferentes dispositivos tendras que hacer estas consultas

$(window).resize(function(){

       if ($(window).width() <= 320) {  

              // es un movil

       }     

});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *