5

¿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.

<!-- Función para obtener el Ancho(Width) --> 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}

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


          obtenerAlto( "ventana", $( window ).height() );
     obtenerAncho( "ventana", $( window ).width() );
 

});
.btncls {
 padding: 10px;
 background-color:#000;
 color:#fff;
 border:none;
 cursor:pointer;
 margin:10px;
}
.txtcls{
 color:#44f;
 font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

1
  • ¿Por que no añades un evento al objeto windows, que cuando este haga resize consultes el nuevo ancho y alto? Sería algo más o menos así: $(window).resize(function(){ $( "#obtal" ).trigger('click'); $( "#obtan" ).trigger('click'); })
    – hrkns
    el 27 dic. 2016 a las 1:38

1 respuesta 1

3

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

$(function () {
<!-- Función para obtener el Ancho(Width) --> 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}

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


          obtenerAlto( "ventana", $( window ).height() );
     obtenerAncho( "ventana", $( window ).width() );
 

});
});
.btncls {
 padding: 10px;
 background-color:#000;
 color:#fff;
 border:none;
 cursor:pointer;
 margin:10px;
}
.txtcls{
 color:#44f;
 font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="txtcls" id="anvent">&nbsp;</div>
<div class="txtcls" id="alvent">&nbsp;</div>

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

       }     

});
4
  • 1
    El ejemplo funciona bien cuando cambio el tamaño de la ventana del navegador se muestran los datos automáticamente. Pero existe un problema la aplicación o el código que me has brindado solo se inician los datos cuando cambio el tamaño de la ventana del navegador, pero si refresco la página la ventana queda en blanco no muestra los datos amigo.
    – Otto
    el 27 dic. 2016 a las 2:38
  • @J.Doe edite mi respuesta revisalo porfavor
    – hubman
    el 27 dic. 2016 a las 2:42
  • Para esto utiliza $(document).ready() ... ademas de $(window).resize() ... algo asi : $(document).ready(function(){$(window).trigger('resize')});
    – MTK
    el 27 dic. 2016 a las 4:56
  • Por favor no eliminar el comentario con la sala de chat de esta discusión. Gracias.
    – user227
    el 27 dic. 2016 a las 5:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.