Détecter quand la hauteur d'un div change à l'aide de jQuery

J'ai un div qui contient du contenu qui est ajouté et supprimé dynamiquement, donc sa hauteur change souvent. J'ai aussi un div qui est absolument positionné directement en dessous avec javascript, donc à moins que je ne puisse détecter quand la hauteur du div change, je ne peux pas repositionner le div en dessous.

Alors, comment puis-je détecter quand la hauteur de cette div change? Je suppose qu'il y a un événement jQuery que je dois utiliser, mais je ne sais pas à quel événement se connecter.

Utilisez un capteur de redimensionnement de la bibliothèque css-element-queries:

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

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

Il utilise une approche basée sur les événements et ne fait pas perdre de temps à votre processeur. Fonctionne dans tous les navigateurs, y compris. IE7 +.

J'ai écrit un plugin il y a quelque temps pour attrchange listener qui ajoute essentiellement une fonction d'écoute sur le changement d'attribut. Même si je le dis comme un plugin, en fait c'est une simple fonction écrite comme un plugin jQuery .. donc si vous voulez .. supprimez le code spécifique du plugin et utilisez les fonctions de base.

Remarque: ce code n'utilise pas d'interrogation

consultez cette simple démo 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();
});

Page du plugin: http://meetselva.github.io/attrchange/

Version réduite: (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)

Vous pouvez utiliser l'événement DOMSubtreeModified

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

Mais cela se déclenchera même si les dimensions ne changent pas, et la réaffectation de la position chaque fois qu'elle se déclenche peut nuire aux performances. D'après mon expérience en utilisant cette méthode, vérifier si les dimensions ont changé est moins cher et vous pouvez donc envisager de combiner les deux.

Ou si vous modifiez directement le div (plutôt que le div soit modifié par l'entrée de l'utilisateur de manière imprévisible, comme s'il est contentEditable), vous pouvez simplement déclencher un événement personnalisé chaque fois que vous le faites.

Inconvénient: IE et Opera ne mettent pas en œuvre cet événement.

Voici comment j'ai récemment géré ce problème:

$('#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');
}

Je sais que j'ai quelques années de retard à la fête, je pense juste que ma réponse peut aider certaines personnes à l'avenir, sans avoir à télécharger de plugins.

Vous pouvez utiliser la MutationObserverclasse.

MutationObserverfournit aux développeurs un moyen de réagir aux changements dans un DOM. Il est conçu pour remplacer les événements de mutation définis dans la spécification des événements DOM3.

Exemple ( 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();

Il existe un plugin jQuery qui peut très bien gérer cela

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

voici une démonstration de celui-ci avec différents scénarios quant au changement de hauteur, si vous redimensionnez le div bordé de rouge.

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

En réponse à user007:

Si la hauteur de votre élément change en raison d'éléments qui y sont ajoutés à l'aide de .append() vous ne devriez pas avoir besoin de détecter le changement de hauteur. Ajoutez simplement le repositionnement de votre deuxième élément dans la même fonction où vous ajoutez le nouveau contenu à votre premier élément.

Un péché:

Exemple de travail

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

Vous pouvez créer un setInterval simple.

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();

ÉDITER:

Ceci est un exemple avec une classe. Mais vous pouvez faire quelque chose de plus simple.

Vous pouvez l'utiliser, mais il ne prend en charge que Firefox et Chrome.

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

Assez basique mais fonctionne:

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

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