jquery redimensionner sur un élément div

Question

jquery a le resize() -event, mais cela fonctionne simplement avec window.

 jQuery(window).resize(function() { /* What ever */ });
 

Cela fonctionne bien! Mais lorsque je veux ajouter l'événement à un élément div, cela ne fonctionne pas.

Par exemple

 jQuery('div').resize(function() { /* What ever */ });
 

Je souhaite démarrer un rappel lorsque la taille d'un élément div a changé. Je ne veux pas commencer un événement redimensionnable - juste un événement pour vérifier si la taille d'un élément div a changé.

Y a-t-il une solution pour faire cela?

Answer 1

DIV ne déclenche pas un événement resize , vous ne pourrez donc pas faire exactement ce que vous avez codé, mais vous pouvez vous pencher sur la surveillance des propriétés DOM .

Si vous travaillez réellement avec quelque chose comme des objets redimensionnables, et que c'est la seule façon pour une div de changer de taille, votre plug-in de redimensionnement implémentera probablement son propre rappel.

Answer 2

Je ne m'intéressais à un déclencheur que lorsque la largeur d'un élément était modifiée (je me moque de la hauteur), j'ai donc créé un événement jQuery qui fait exactement cela, en utilisant un élément invisible iframe.

 $.event.special.widthChanged = {
  remove: function() {
      $(this).children('iframe.width-changed').remove();
  },
  add: function () {
      var elm = $(this);
      var iframe = elm.children('iframe.width-changed');
      if (!iframe.length) {
          iframe = $('<iframe/>').addClass('width-changed').prependTo(this);
      }
      var oldWidth = elm.width();
      function elmResized() {
          var width = elm.width();
          if (oldWidth != width) {
              elm.trigger('widthChanged', [width, oldWidth]);
              oldWidth = width;
          }
      }

      var timer = 0;
      var ielm = iframe[0];
      (ielm.contentWindow || ielm).onresize = function() {
          clearTimeout(timer);
          timer = setTimeout(elmResized, 20);
      };
  }
}
 

Il nécessite les css suivants:

 iframe.width-changed {
    width: 100%;
    display: block;
    border: 0;
    height: 0;
    margin: 0;
}
 

Vous pouvez le voir en action ici widthChanged fiddle

Answer 3

Et ça:

 divH = divW = 0;
jQuery(document).ready(function(){
    divW = jQuery("div").width();
    divH = jQuery("div").height();
});
function checkResize(){
    var w = jQuery("div").width();
    var h = jQuery("div").height();
    if (w != divW || h != divH) {
        /*what ever*/
        divH = h;
        divW = w;
    }
}
jQuery(window).resize(checkResize);
var timer = setInterval(checkResize, 1000);
 

BTW, je vous suggère d'ajouter un identifiant à la div et de changer le $ ("div") en $ ("# yourid"), ça va être plus rapide, et ça ne cassera pas quand plus tard vous ajoutez d'autres divs

Answer 4

Il existe un plugin très agréable, facile à utiliser et léger (utilise les événements de navigateur natifs pour la détection) pour JavaScript de base et pour jQuery, sorti cette année. Il fonctionne parfaitement:

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

Answer 5

Oui, seule la fenêtre est supportée, mais vous pouvez utiliser un plugin pour cela: http://benalman.com/projects/jquery-resize-plugin/