web-dev-qa-db-fra.com

jQuery redimensionner auditeur sur un div

C'est la situation, j'ai 2 divs l'un à côté de l'autre. Une div est très dynamique en hauteur, ce qui signifie qu’elle peut grossir et se réduire pour tenir compte de son contenu. Par exemple, cette div a un contenu qui peut être plié ouvert ou fermé, ou des conteneurs qui peuvent être développés pour s’adapter au contenu chargé ajax.

Maintenant, à côté de cette div est une 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 cette seconde div en fonction de sa hauteur.

En d’autres termes, div 1 change de taille, div 2 suit css et j’ai maintenant besoin de déclencher un appel ajax pour redéfinir div 2 avec un nouveau contenu, en respectant sa nouvelle taille.

Quelqu'un at-il une idée de comment faire cela avec jQuery? Si possible, sans utiliser de délais d'attente?

À votre santé.

jqueryresizelistener
15
Peter

Comme le fil conducteur fourni par poelinca , il existe quelques plugins Nice disponibles pour cette fonctionnalité.

Si vous n'aimez pas l'idée du plugin, une autre solution simple serait de simplement déclencher un événement "redimensionner" sur la div chaque fois que le contenu est modifié. Ensuite, vous pouvez le surveiller avec resize () comme prévu, en utilisant un élégant motif observer .

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

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

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

Fonctionne comme un charme! 

J'ai testé attrchange mais cela ne fonctionnait pas, j'ai perdu 2 heures de travail :(

6
Jaroslav Štreit

La seule chose à laquelle je pouvais penser, c’est qu’une minuterie vérifie la hauteur toutes les X secondes.

Quelque chose comme ça:

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
}
0
Neal