Cambiar el tamaño del elemento div

Question

jQuery tiene el resize() - evento, pero solo funciona con la ventana.

jQuery(window).resize(function() { /* What ever */ }); 

¡Esto funciona bien! Pero cuando quiero agregar el evento a un elemento div, no funciona.

E.g.

jQuery('div').resize(function() { /* What ever */ }); 

Quiero iniciar una devolución de llamada cuando el tamaño de un elemento div ha cambiado. No quiero iniciar un tamaño variable - evento - solo un evento para verificar si el tamaño de un elemento div - ha cambiado.

¿Hay alguna solución para hacer esto?

Answer 1

Sólo ventana está soportada Sí, pero se podía utilizar un plugin para ello: http://benalman.com/projects/jquery-resize-plugin/

Answer 2

DIV no se dispara un evento resize, por lo que no será capaz de hacer exactamente lo que usted ha codificado, pero se puede mira en monitoring DOM properties.

Si realmente está trabajando con algo así como resizables, y esa es la única forma en que un div cambia de tamaño, entonces su plugin de tamaño probablemente implementará una devolución de llamada propia.

Answer 3

qué pasa con esto:

divH = divW = 0; 
jQuery(document).ready(function(){ 
    divW = jQuery("div").width(); 
    divH = jQuery("div").height(); 
}); 
function checkResize(){ 
    var w = jQuery("div").width(); 
    var h = jQuery("div").height(); 
    if (w != divW || h != divH) { 
     /*what ever*/ 
     divH = h; 
     divW = w; 
    } 
} 
jQuery(window).resize(checkResize); 
var timer = setInterval(checkResize, 1000); 

cierto os sugiero agregar un id al div y cambiar el $ ("div") a $ ("# yourid"), que va a ser más rápido y no se romperá cuando más tarde agregue otros divs

Answer 4

Para una integración de google maps que estaba buscando una manera de detectar cuando un div ha cambiado de tamaño. Dado que los mapas de Google siempre requieren las dimensiones adecuadas, p. ancho y alto para renderizar correctamente.

La solución que se me ocurrió es la delegación de un evento, en mi caso, un clic en la pestaña. Esto podría ser un cambio de tamaño de ventana, por supuesto, la idea sigue siendo la misma:

if (parent.is(':visible')) { 
    w = parent.outerWidth(false); 
    h = w * mapRatio /*9/16*/; 
    this.map.css({ width: w, height: h }); 
} else { 
    this.map.closest('.tab').one('click', function() { 
     this.activate(); 
    }.bind(this)); 
} 

this.map en este caso es mi mapa div. Dado que mi padre es invisible en la carga, el ancho y la altura calculados son 0 o no coinciden. Al usar .bind(this) puedo delegar la ejecución del script (this.activate) en un evento (click).

Ahora estoy seguro de que lo mismo aplica para los eventos de cambio de tamaño.

$(window).one('resize', function() { 
    this.div.css({ /*whatever*/ }); 
}.bind(this)); 

Espero que ayude a alguien!

Answer 5

Hay un plugin muy agradable, fácil de usar y liviano (usa exploradores nativos para detección) tanto para JavaScript básico como para jQuery que se lanzó este año. Se lleva a cabo a la perfección:

https://github.com/sdecima/javascript-detect-element-resize

Answer 6

sólo estaba interesado por un gatillo cuando la anchura de un elemento se ha cambiado (cuidado que don' sobre la altura), por lo que creó un evento jQuery que hace exactamente eso, utilizando una elemento iframe invisible.

$.event.special.widthChanged = { 
    remove: function() { 
     $(this).children('iframe.width-changed').remove(); 
    }, 
    add: function() { 
     var elm = $(this); 
     var iframe = elm.children('iframe.width-changed'); 
     if (!iframe.length) { 
      iframe = $('<iframe/>').addClass('width-changed').prependTo(this); 
     } 
     var oldWidth = elm.width(); 
     function elmResized() { 
      var width = elm.width(); 
      if (oldWidth != width) { 
       elm.trigger('widthChanged', [width, oldWidth]); 
       oldWidth = width; 
      } 
     } 

     var timer = 0; 
     var ielm = iframe[0]; 
     (ielm.contentWindow || ielm).onresize = function() { 
      clearTimeout(timer); 
      timer = setTimeout(elmResized, 20); 
     }; 
    } 
} 

Se requiere el siguiente CSS:

iframe.width-changed { 
    width: 100%; 
    display: block; 
    border: 0; 
    height: 0; 
    margin: 0; 
} 

Se puede ver en acción aquí widthChanged fiddle

Answer 7

// this is a Jquery plugin function that fires an event when the size of an element is changed 
// usage: $().sizeChanged(function(){}) 

(function ($) { 

$.fn.sizeChanged = function (handleFunction) { 
    var element = this; 
    var lastWidth = element.width(); 
    var lastHeight = element.height(); 

    setInterval(function() { 
     if (lastWidth === element.width()&&lastHeight === element.height()) 
      return; 
     if (typeof (handleFunction) == 'function') { 
      handleFunction({ width: lastWidth, height: lastHeight }, 
          { width: element.width(), height: element.height() }); 
      lastWidth = element.width(); 
      lastHeight = element.height(); 
     } 
    }, 100); 


    return element; 
}; 

}(jQuery)); 

Answer 8

Sólo trate de esta func (que puede trabajar no sólo para divs):

function resized(elem, func = function(){}, args = []){ 
    elem = jQuery(elem); 
    func = func.bind(elem); 
    var h = -1, w = -1; 
    setInterval(function(){ 
     if (elem.height() != h || elem.width() != w){ 
      h = elem.height(); 
      w = elem.width(); 
      func.apply(null, args); 
     } 
    }, 100); 
} 

Se puede utilizar de esta manera

resized(/*element*/ '.advs-columns-main > div > div', /*callback*/ function(a){ 
    console.log(a); 
    console.log(this); //for accessing the jQuery element you passed 
}, /*callback arguments in array*/ ['I\'m the first arg named "a"!']); 

ACTUALIZACIÓN: También puede utilizar observador más progresivo (que puede funcionar para cualquier objeto, no sólo los elementos DOM):

function changed(elem, propsToBeChanged, func = function(){}, args = [], interval = 100){ 
     func = func.bind(elem); 
     var currentVal = {call: {}, std: {}}; 
     $.each(propsToBeChanged, (property, needCall)=>{ 
      needCall = needCall ? 'call' : 'std'; 
      currentVal[needCall][property] = new Boolean(); // is a minimal and unique value, its equivalent comparsion with each other will always return false 
     }); 
     setInterval(function(){ 
      $.each(propsToBeChanged, (property, needCall)=>{ 
       try{ 
        var currVal = needCall ? elem[property]() : elem[property]; 
       } catch (e){ // elem[property] is not a function anymore 
        var currVal = elem[property]; 
        needCall = false; 
        propsToBeChanged[property] = false; 
       } 
       needCall = needCall ? 'call' : 'std'; 
       if (currVal !== currentVal[needCall][property]){ 
        currentVal[needCall][property] = currVal; 
        func.apply(null, args); 
       } 
      }); 
     }, interval); 
    } 

Haga la prueba :

var b = '2', 
    a = {foo: 'bar', ext:()=>{return b}}; 
changed(a, { 
// prop name || do eval like a function? 
    foo:  false, 
    ext:  true 
},()=>{console.log('changed')}) 

se registrará 'cambiado' cada vez que se cambia b, a.foo o a.ext directamente