Détecter lorsqu'un div de la hauteur à l'aide de jQuery

Question

J'ai une div qui contient du contenu qui est en cours d'ajouter et de retirer dynamiquement, de sorte que sa hauteur est de changer souvent. Moi aussi j'ai une div qui est absolument positionné directement au-dessous avec le javascript, donc si je peux détecter si la hauteur de la div changements, je ne peux pas repositionner la div en dessous d'elle.

Alors, comment puis-je détecter lorsque la hauteur de la div changements? Je suppose que il y a un peu de jQuery événement dont j'ai besoin, mais je ne suis pas sûr que l'on à crochet.

Merci.

Answer 1

J'ai écrit un plugin parfois en arrière pour attrchange auditeur qui ajoute essentiellement une fonction d'écoute sur la modification de l'attribut. Même si je le dis comme un plugin, en fait, c'est une fonction simple qui est écrit comme un plugin jQuery.. donc si vous voulez.. bande de désactiver le plugin spécifique de code et d'utiliser les fonctions de base.

Note: Ce code ne pas utiliser d'interrogation

découvrez cette simple démonstration 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 compacte: (1.68 ko)

(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 2

Vous pouvez utiliser le DOMSubtreeModified événement

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

Mais ce sera un feu, même si les dimensions ne changent pas, et la réaffectation de la position à chaque fois qu'il tire peut prendre un gain de performance. Dans mon expérience, à l'aide de cette méthode, de vérifier si les dimensions ont changé, c'est moins cher et donc, vous pourriez envisager de combiner les deux.

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

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

Answer 3

C'est de cette façon que j'ai récemment traité 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 je suis quelques années de retard à la fête, il suffit de penser que ma réponse peut aider certaines personnes à l'avenir, sans avoir à télécharger tous les plugins.

Answer 4

Il y a un plugin jQuery qui peut faire face à cette très bien

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

voici une démo de différents scénarios: à quand le changement de la hauteur, si vous redimensionnez le rouge bordé div.

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

Answer 5

En réponse à user007:

Si la hauteur de votre élément est en train de changer en raison des éléments ajoutés à l'aide d' .append() vous ne devriez pas besoin de détecter le changement de hauteur. Il suffit d'ajouter le repositionner de votre deuxième élément, dans la même fonction où vous ajoutez du nouveau contenu à votre premier élément.

Comme dans:

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