Detectando cuando cambia la altura de un div usando jQuery

Question

Tengo un div que contiene algún contenido que se agrega y quita dinámicamente, por lo que su altura cambia con frecuencia. También tengo un div que está absolutamente posicionado directamente debajo con javascript, así que a menos que pueda detectar cuándo cambia la altura del div, no puedo reposicionar el div debajo de él.

Entonces, ¿cómo puedo detectar cuándo cambia la altura de ese div? Supongo que hay algún evento de jQuery que necesito usar, pero no estoy seguro de cuál enganchar.

Answer 1

Usted puede utilizar el evento DOMSubtreeModified

$(something).bind('DOMSubtreeModified' ... 

Pero esto se disparará aunque si las dimensiones no cambian, y la reasignación de la posición cada vez que se dispara puede tener un impacto en el rendimiento. En mi experiencia con este método, comprobar si las dimensiones han cambiado es menos costoso y, por lo tanto, podría considerar combinar los dos.

O si está alterando directamente el div (en lugar de que el div sea alterado por la entrada del usuario de maneras impredecibles, como si fuera contentEditable), puede simplemente iniciar un evento personalizado siempre que lo haga.

Desventaja: IE y Opera no implementan este evento.

Answer 2

hay un plugin jQuery que puede lidiar con esto muy bien

http://www.jqui.net/jquery-projects/jquery-mutate-official/

que aquí hay una demostración de la misma con diferentes escenarios en cuanto a cuando el cambio de altura, si cambia el tamaño de la div rojo con borde.

http://www.jqui.net/demo/mutate/

Answer 3

Esto es como recientemente he manejado este problema:

$('#your-resizing-div').bind('getheight', function() { 
    $('#your-resizing-div').height(); 
}); 

function your_function_to_load_content() { 
    /*whatever your thing does*/ 
    $('#your-resizing-div').trigger('getheight'); 
} 

Sé que soy unos años tarde a la fiesta, al igual que mi respuesta puede ayudar a algunas personas en el futuro, sin tener que descargar ningún complemento.

Answer 4

En respuesta a user007:

Si la altura de su elemento está cambiando debido a los artículos que se adjunta a él utilizando .append() que no es necesario para detectar el cambio de altura. Simplemente agregue la reposición de su segundo elemento en la misma función donde está agregando el nuevo contenido a su primer elemento.

Como en:

Working Example

$('.class1').click(function() { 
    $('.class1').append("<div class='newClass'><h1>This is some content</h1></div>"); 
    $('.class2').css('top', $('.class1').offset().top + $('.class1').outerHeight()); 
}); 

Answer 5

escribí un plugin hace algún tiempo para attrchange oyente que básicamente añade una función de detector de cambio de atributo. Aunque lo digo como un plugin, en realidad es una función simple escrita como un plugin jQuery ... así que si quieres ... quita el código specfic del plugin y usa las funciones principales.

Nota: Este código no utiliza el sondeo

la salida esta simple demostración http://jsfiddle.net/aD49d/

$(function() { 
    var prevHeight = $('#test').height(); 
    $('#test').attrchange({ 
     callback: function (e) { 
      var curHeight = $(this).height();    
      if (prevHeight !== curHeight) { 
       $('#logger').text('height changed from ' + prevHeight + ' to ' + curHeight); 

       prevHeight = curHeight; 
      }    
     } 
    }).resizable(); 
}); 

página Plugin:http://meetselva.github.io/attrchange/

minified versión: (1.68kb)

(function(e){function t(){var e=document.createElement("p");var t=false;if(e.addEventListener)e.addEventListener("DOMAttrModified",function(){t=true},false);else if(e.attachEvent)e.attachEvent("onDOMAttrModified",function(){t=true});else return false;e.setAttribute("id","target");return t}function n(t,n){if(t){var r=this.data("attr-old-value");if(n.attributeName.indexOf("style")>=0){if(!r["style"])r["style"]={};var i=n.attributeName.split(".");n.attributeName=i[0];n.oldValue=r["style"][i[1]];n.newValue=i[1]+":"+this.prop("style")[e.camelCase(i[1])];r["style"][i[1]]=n.newValue}else{n.oldValue=r[n.attributeName];n.newValue=this.attr(n.attributeName);r[n.attributeName]=n.newValue}this.data("attr-old-value",r)}}var r=window.MutationObserver||window.WebKitMutationObserver;e.fn.attrchange=function(i){var s={trackValues:false,callback:e.noop};if(typeof i==="function"){s.callback=i}else{e.extend(s,i)}if(s.trackValues){e(this).each(function(t,n){var r={};for(var i,t=0,s=n.attributes,o=s.length;t<o;t++){i=s.item(t);r[i.nodeName]=i.value}e(this).data("attr-old-value",r)})}if(r){var o={subtree:false,attributes:true,attributeOldValue:s.trackValues};var u=new r(function(t){t.forEach(function(t){var n=t.target;if(s.trackValues){t.newValue=e(n).attr(t.attributeName)}s.callback.call(n,t)})});return this.each(function(){u.observe(this,o)})}else if(t()){return this.on("DOMAttrModified",function(e){if(e.originalEvent)e=e.originalEvent;e.attributeName=e.attrName;e.oldValue=e.prevValue;s.callback.call(this,e)})}else if("onpropertychange"in document.body){return this.on("propertychange",function(t){t.attributeName=window.event.propertyName;n.call(e(this),s.trackValues,t);s.callback.call(this,t)})}return this}})(jQuery) 

Answer 6

utilizar un sensor de cambio de tamaño de la biblioteca CSS-elemento-consultas:

https://github.com/marcj/css-element-queries

new ResizeSensor(jQuery('#myElement'), function() { 
    console.log('myelement has been resized'); 
}); 

Se utiliza un enfoque basado en el evento y no pierda su tiempo de CPU. Funciona en todos los navegadores incl. IE7 +.

Answer 7

Puede usar la clase MutationObserver.

MutationObserver proporciona a los desarrolladores una forma de reaccionar a los cambios en un DOM. Está diseñado como un reemplazo para los eventos de mutación definidos en la especificación de eventos DOM3.

Ejemplo (source)

// select the target node 
var target = document.querySelector('#some-id'); 

// create an observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation.type); 
    });  
}); 

// configuration of the observer: 
var config = { attributes: true, childList: true, characterData: true }; 

// pass in the target node, as well as the observer options 
observer.observe(target, config); 

// later, you can stop observing 
observer.disconnect(); 

Answer 8

Usted puede hacer una setInterval sencilla.

function someJsClass() 
 
{ 
 
    var _resizeInterval = null; 
 
    var _lastHeight = 0; 
 
    var _lastWidth = 0; 
 
    
 
    this.Initialize = function(){ 
 
    var _resizeInterval = setInterval(_resizeIntervalTick, 200); 
 
    }; 
 
    
 
    this.Stop = function(){ 
 
    if(_resizeInterval != null) 
 
     clearInterval(_resizeInterval); 
 
    }; 
 
    
 
    var _resizeIntervalTick = function() { 
 
    if ($(yourDiv).width() != _lastWidth || $(yourDiv).height() != _lastHeight) { 
 
     _lastWidth = $(contentBox).width(); 
 
     _lastHeight = $(contentBox).height(); 
 
     DoWhatYouWantWhenTheSizeChange(); 
 
    } 
 
    }; 
 
} 
 

 
var class = new someJsClass(); 
 
class.Initialize();

EDIT:

Este es un ejemplo con una clase. Pero puedes hacer algo más fácil.

Answer 9

Puede usar esto, pero solo es compatible con Firefox y Chrome.

$(element).bind('DOMSubtreeModified', function() { 
 
    var $this = this; 
 
    var updateHeight = function() { 
 
    var Height = $($this).height(); 
 
    console.log(Height); 
 
    }; 
 
    setTimeout(updateHeight, 2000); 
 
});

Answer 10

bastante básico pero funciona:

function dynamicHeight() { 
    var height = jQuery('').height(); 
    jQuery('.edito-wrapper').css('height', editoHeight); 
} 
editoHeightSize(); 

jQuery(window).resize(function() { 
    editoHeightSize(); 
});