jquery resize listener sur un div

C'est le cas, j'ai 2 div est à côté les uns des autres. Un div est très dynamique en hauteur, ce qui signifie qu'il peut grandir et rétrécir afin de s'adapter à son contenu. Par exemple, cette div contient du contenu qui peut être plié d'ouvrir ou de fermer, ou de conteneurs qui peuvent développer pour s'adapter à ajax le contenu chargé.

Maintenant, à côté de cette div est un autre qui suit parfaitement la hauteur de la première par css. Fonctionne très bien. Mais voici la question: je voudrais changer le contenu de ce deuxième div en fonction de sa hauteur.

En d'autres termes, div 1 les changements de taille, div 2 suit à travers le css et j'ai maintenant besoin de déclencher un appel ajax pour re-remplir div 2 avec du nouveau contenu, digne d'elle la nouvelle taille.

Personne n'a une idée de comment je peux le faire avec jquery? Si possible, sans l'utilisation de délais d'attente?

Acclamations.

source d'informationauteur Peter

  1. 19

    Comme le fil poelinca fourni l'indique, il ya quelques belles plugins disponibles pour cette fonctionnalité.

    Si vous n'aimez pas le plugin idée, une solution simple serait tout simplement de déclencher un "redimensionnement" de l'événement sur la div à chaque fois que le contenu est modifié. Ensuite, vous pouvez le surveiller avec resize() comme prévu, l'utilisation d'un élégant modèle observateur.

    function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   //all your magic resize mojo goes here
});
  2. 6

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

    Fonctionne comme un charme!

    J'ai testé attrchange mais ce n'était pas de travailler, perdu 2 heures de travail 🙁

  3. 0

    La seule chose que je pouvais penser, c'est avoir un minuteur de vérification de la hauteur de chaque X secondes.

    Quelque chose comme ceci:

    function checkHeightTimer(){
    var div1 = $('#div1');
    var div2 = $('#div2');
    var somesize = #somenumber here;
    if(div1.height() > somesize){
        //do something to div2
    }
    setTimeout(checkHeightTimer, 500); //at 500 miliseconds
}