web-dev-qa-db-fra.com

Comment détecter la dimension de DIV modifiée?

J'ai l'exemple suivant HTML, il y a un DIV qui a 100% de largeur. Il contient des éléments. Lors du redimensionnement des fenêtres, les éléments internes peuvent être repositionnés et la dimension de la div peut changer. Je demande s'il est possible de raccrocher l'événement de changement de dimension de la div? et comment faire ça? Je lie actuellement la fonction de rappel à l'événement de redimensionnement jQuery sur la DIV cible. Cependant, aucun journal de console n'est généré, voir ci-dessous:

Before Resizeenter image description here

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>
javascriptjqueryhtml
273
William Choi

Il existe une méthode très efficace pour déterminer si la taille d'un élément a été modifiée.

http://marcj.github.io/css-element-queries/

Cette bibliothèque a une classe ResizeSensor qui peut être utilisée pour la détection de redimensionnement. 
Il utilise une approche événementielle, il est donc extrêmement rapide et ne gaspille pas de temps CPU.

Exemple:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Veuillez ne pas utiliser le plugin jQuery onresize car il utilise la boucle setTimeout() pour vérifier les modifications. 
This IS est incroyablement lent et inexact.

Divulgation: je suis directement associé à cette bibliothèque.

228
Marc J. Schmidt

Une nouvelle norme à cet égard est l’API Resize Observer, disponible dans Chrome 64.

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)
Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

Redimensionner Observateur

Spec: https://wicg.github.io/ResizeObserver

Polyfills: https://github.com/WICG/ResizeObserver/issues/3

Firefox Issue: https://bugzil.la/1272409

Safari Issue: http://wkb.ug/157743

Support actuel: http://caniuse.com/#feat=resizeobserver

127
Daniel Herr

Vous devez lier l'événement resize à l'objet window et non à un élément HTML générique.

Vous pouvez ensuite utiliser ceci:

$(window).resize(function() {
    ...
});

et dans la fonction de rappel, vous pouvez vérifier la nouvelle largeur de votre appel div

$('.a-selector').width();

Donc, la réponse à votre question est non , vous ne pouvez pas lier l’événement resize à un div.

36
Alessandro Vendruscolo

À long terme, vous pourrez utiliser le ResizeObserver .

new ResizeObserver(callback).observe(element);

Malheureusement, il n'est actuellement pas pris en charge par défaut dans de nombreux navigateurs.

En attendant, vous pouvez utiliser les fonctions suivantes. Depuis, la majorité des changements de taille d'élément proviendront du redimensionnement de la fenêtre ou de la modification de quelque chose dans le DOM. Vous pouvez écouter le redimensionnement de la fenêtre avec resize event et vous pouvez écouter les modifications du DOM avec MutationObserver .

Voici un exemple de fonction qui vous rappellera lorsque la taille de l'élément fourni change à la suite de l'un de ces événements:

var onResize = function(element, callback) {
  if (!onResize.watchedElementData) {
    // First time we are called, create a list of watched elements
    // and hook up the event listeners.
    onResize.watchedElementData = [];

    var checkForChanges = function() {
      onResize.watchedElementData.forEach(function(data) {
        if (data.element.offsetWidth !== data.offsetWidth ||
            data.element.offsetHeight !== data.offsetHeight) {
          data.offsetWidth = data.element.offsetWidth;
          data.offsetHeight = data.element.offsetHeight;
          data.callback();
        }
      });
    };

    // Listen to the window's size changes
    window.addEventListener('resize', checkForChanges);

    // Listen to changes on the elements in the page that affect layout 
    var observer = new MutationObserver(checkForChanges);
    observer.observe(document.body, { 
      attributes: true,
      childList: true,
      characterData: true,
      subtree: true 
    });
  }

  // Save the element we are watching
  onResize.watchedElementData.Push({
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  });
};
22
nkron

La meilleure solution serait d'utiliser les requêtes dites Element. Cependant, ils ne sont pas standard, aucune spécification n'existe - et la seule option est d'utiliser l'un des polyfills/bibliothèques disponibles, si vous voulez utiliser cette méthode.

L'idée derrière les requêtes d'éléments est de permettre à un certain conteneur de la page de répondre à l'espace qui lui est fourni. Cela permettra d'écrire un composant une fois, puis de le déposer n'importe où sur la page, tout en ajustant son contenu à sa taille actuelle. Peu importe la taille de la fenêtre. C'est la première différence que nous voyons entre les requêtes d'élément et les requêtes de média. Tout le monde espère qu'à un moment donné, une spécification sera créée pour normaliser les requêtes d'éléments (ou quelque chose qui atteigne le même objectif) et les rendre natives, propres, simples et robustes. La plupart des gens s'accordent à dire que les requêtes média sont assez limitées et ne permettent pas une conception modulaire et une réactivité réelle.

Il existe quelques polyfill/bibliothèques qui résolvent le problème de différentes manières (on pourrait appeler des solutions de contournement au lieu de solutions):

J'ai vu d'autres solutions proposées à des problèmes similaires. Ils utilisent généralement des minuteries ou la taille de la fenêtre/fenêtre sous le capot, ce qui n’est pas une vraie solution. De plus, je pense qu’il devrait idéalement être résolu principalement en CSS, et non en javascript ou html. 

14
Stan

J'ai trouvé cette bibliothèque qui fonctionnait alors que la solution de MarcJ ne:

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

Il est très léger et détecte même les redimensionnements naturels via CSS ou simplement le chargement/rendu HTML.

Échantillon de code (tiré du lien):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>
14
joshcomley

Jetez un oeil à ceci http://benalman.com/code/projects/jquery-resize/examples/resize/

Il a divers exemples. Essayez de redimensionner votre fenêtre et voyez comment les éléments à l'intérieur des éléments de conteneur ont été ajustés.

Exemple avec js fiddle pour expliquer comment le faire fonctionner.
Regardez ce violon http://jsfiddle.net/sgsqJ/4/

Dans cet événement resize () est lié à un élément de la classe "test" ainsi qu'à l'objet window Et au rappel redimensionné de l'objet window $ ('. Test'). Resize () est appelé.

par exemple.

$('#test_div').bind('resize', function(){
            console.log('resized');
});

$(window).resize(function(){
   $('#test_div').resize();
});
14
Bharat Patil

ResizeSensor.js fait partie d'une immense bibliothèque, mais j'ai réduit ses fonctionnalités à THIS:

function ResizeSensor(element, callback)
{
    let zIndex = parseInt(getComputedStyle(element));
    if(isNaN(zIndex)) { zIndex = 0; };
    zIndex--;

    let expand = document.createElement('div');
    expand.style.position = "absolute";
    expand.style.left = "0px";
    expand.style.top = "0px";
    expand.style.right = "0px";
    expand.style.bottom = "0px";
    expand.style.overflow = "hidden";
    expand.style.zIndex = zIndex;
    expand.style.visibility = "hidden";

    let expandChild = document.createElement('div');
    expandChild.style.position = "absolute";
    expandChild.style.left = "0px";
    expandChild.style.top = "0px";
    expandChild.style.width = "10000000px";
    expandChild.style.height = "10000000px";
    expand.appendChild(expandChild);

    let shrink = document.createElement('div');
    shrink.style.position = "absolute";
    shrink.style.left = "0px";
    shrink.style.top = "0px";
    shrink.style.right = "0px";
    shrink.style.bottom = "0px";
    shrink.style.overflow = "hidden";
    shrink.style.zIndex = zIndex;
    shrink.style.visibility = "hidden";

    let shrinkChild = document.createElement('div');
    shrinkChild.style.position = "absolute";
    shrinkChild.style.left = "0px";
    shrinkChild.style.top = "0px";
    shrinkChild.style.width = "200%";
    shrinkChild.style.height = "200%";
    shrink.appendChild(shrinkChild);

    element.appendChild(expand);
    element.appendChild(shrink);

    function setScroll()
    {
        expand.scrollLeft = 10000000;
        expand.scrollTop = 10000000;

        shrink.scrollLeft = 10000000;
        shrink.scrollTop = 10000000;
    };
    setScroll();

    let size = element.getBoundingClientRect();

    let currentWidth = size.width;
    let currentHeight = size.height;

    let onScroll = function()
    {
        let size = element.getBoundingClientRect();

        let newWidth = size.width;
        let newHeight = size.height;

        if(newWidth != currentWidth || newHeight != currentHeight)
        {
            currentWidth = newWidth;
            currentHeight = newHeight;

            callback();
        }

        setScroll();
    };

    expand.addEventListener('scroll', onScroll);
    shrink.addEventListener('scroll', onScroll);
};

Comment l'utiliser:

let container = document.querySelector(".container");
new ResizeSensor(container, function()
{
    console.log("dimension changed:", container.clientWidth, container.clientHeight);
});
13
Martin Wantke

Je ne recommande pas setTimeout() bidouille car cela ralentit la performance! Vous pouvez utiliser plutôt/ observateurs de la mutation DOM pour écouter le changement de taille de la Div.

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

Voici le violon
Essayez de changer la taille de la div.

Vous pouvez ensuite envelopper votre méthode dans la méthode debounce pour améliorer son efficacité. debounce déclenchera votre méthode toutes les x millisecondes au lieu de déclencher chaque milliseconde le redimensionnement de la DIV.

12
JerryGoyal

Seul l'objet window génère un événement "redimensionner". Le seul moyen que je connaisse de faire ce que vous voulez faire est d'exécuter un minuteur à intervalles qui vérifie périodiquement la taille.

7
Pointy

Vous pouvez utiliser iframe ou object en utilisant contentWindow ou contentDocument lors du redimensionnement. Sans setInterval ou setTimeout

Les marches:

  1. Définissez la position de votre élément sur relative
  2. Ajouter à l'intérieur d'un IFRAME caché absolu transparent
  3. Écoutez l'événement IFRAME.contentWindow - onresize

Un exemple de HTML:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

Le Javascript:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

Exemple en cours d'exécution

JsFiddle: https://jsfiddle.net/qq8p470d/

Voir plus:

7
Aminadav Glickshtein

var div = document.getElementById('div');
div.addEventListener('resize', (event) => console.log(event.detail));

function checkResize (mutations) {
    var el = mutations[0].target;
    var w = el.clientWidth;
    var h = el.clientHeight;
    
    var isChange = mutations
      .map((m) => m.oldValue + '')
      .some((prev) => prev.indexOf('width: ' + w + 'px') == -1 || prev.indexOf('height: ' + h + 'px') == -1);

    if (!isChange)
      return;

    var event = new CustomEvent('resize', {detail: {width: w, height: h}});
    el.dispatchEvent(event);
}

var observer = new MutationObserver(checkResize); 
observer.observe(div, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});
#div {width: 100px; border: 1px solid #bbb; resize: both; overflow: hidden;}
<div id = "div">DIV</div>

6
Aikon Mogwai

Mon plugin jQuery active l'événement "redimensionner" sur tous les éléments et pas seulement sur window.

https://github.com/dustinpoissant/ResizeTriggering

$("#myElement") .resizeTriggering().on("resize", function(e){
  // Code to handle resize
});
3
Dustin Poissant

Ce billet de blog m'a aidé à détecter efficacement les changements de taille des éléments DOM.

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

Comment utiliser ce code ...

AppConfig.addResizeListener(document.getElementById('id'), function () {
  //Your code to execute on resize.
});

Code empaqueté utilisé par l'exemple ...

var AppConfig = AppConfig || {};
AppConfig.ResizeListener = (function () {
    var attachEvent = document.attachEvent;
    var isIE = navigator.userAgent.match(/Trident/);
    var requestFrame = (function () {
        var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            function (fn) { return window.setTimeout(fn, 20); };
        return function (fn) { return raf(fn); };
    })();

    var cancelFrame = (function () {
        var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
               window.clearTimeout;
        return function (id) { return cancel(id); };
    })();

    function resizeListener(e) {
        var win = e.target || e.srcElement;
        if (win.__resizeRAF__) cancelFrame(win.__resizeRAF__);
        win.__resizeRAF__ = requestFrame(function () {
            var trigger = win.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
                fn.call(trigger, e);
            });
        });
    }

    function objectLoad(e) {
        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
        this.contentDocument.defaultView.addEventListener('resize', resizeListener);
    }

    AppConfig.addResizeListener = function (element, fn) {
        if (!element.__resizeListeners__) {
            element.__resizeListeners__ = [];
            if (attachEvent) {
                element.__resizeTrigger__ = element;
                element.attachEvent('onresize', resizeListener);
            } else {
                if (getComputedStyle(element).position === 'static') element.style.position = 'relative';
                var obj = element.__resizeTrigger__ = document.createElement('object');
                obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
                obj.__resizeElement__ = element;
                obj.onload = objectLoad;
                obj.type = 'text/html';
                if (isIE) element.appendChild(obj);
                obj.data = 'about:blank';
                if (!isIE) element.appendChild(obj);
            }
        }
        element.__resizeListeners__.Push(fn);
    };

    AppConfig.removeResizeListener = function (element, fn) {
        element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
        if (!element.__resizeListeners__.length) {
            if (attachEvent) element.detachEvent('onresize', resizeListener);
            else {
                element.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
                element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
            }
        }
    }
})();

Remarque: AppConfig est un espace de noms/objet que j'utilise pour organiser des fonctions réutilisables. N'hésitez pas à rechercher et remplacer le nom par tout ce que vous souhaitez.

3
Ben Gripka

Vous pouvez essayer le code dans l'extrait suivant, il couvre vos besoins en utilisant javascript. (exécutez l'extrait de code et cliquez sur le lien de la page entière pour déclencher l'alerte indiquant que la div est redimensionnée si vous souhaitez la tester. _). 

Sur la base du fait qu'il s'agit d'une setInterval de 100 millisecondes, j'oserais dire que mon PC ne l'a pas trouvé trop gourmand en ressources processeur. (0,1% de l’UC a été utilisé comme total pour tous les onglets ouverts dans Chrome au moment de l’essai). Mais là encore, c’est pour une seule div, si vous voulez faire cela pour une grande quantité d’éléments, alors oui, cela pourrait être très gourmand en ressources processeur.

Vous pouvez toujours utiliser un événement click pour arrêter le div-resize sniffing _ de toute façon.

var width = 0; 
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized div');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
</div>

Vous pouvez vérifier le violon aussi

METTRE &AGRAVE; JOUR

var width = 0; 
function myInterval() {
var interval = setInterval(function(){
if(width <= 0){
width = document.getElementById("test_div").clientWidth;
} 
if(document.getElementById("test_div").clientWidth!==width) {   
  alert('resized');
  width = document.getElementById("test_div").clientWidth;
}    

}, 100);
return interval;
}
var interval = myInterval();
document.getElementById("clickMe").addEventListener( "click" , function() {
if(typeof interval!=="undefined") {
clearInterval(interval);
alert("stopped div-resize sniffing");
}
});
document.getElementById("clickMeToo").addEventListener( "click" , function() {
myInterval();
alert("started div-resize sniffing");
});
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" id="clickMe" />
        <input type="button" value="button 2" id="clickMeToo" />
        <input type="button" value="button 3" />
</div>

Mise à jour Fiddle

2
Peter Darmis

Avec Clay.js ( https://github.com/zzarcon/clay ), il est assez simple de détecter les modifications apportées à la taille de l'élément

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});
2
Zzarcon

Étonnamment, ce problème est toujours aussi ancien dans la plupart des navigateurs.

Comme d'autres l'ont déjà dit, Chrome 64+ est maintenant livré avec Resize Observes en mode natif. Cependant, les spécifications sont en cours de réglage et Chrome est actuellement (à compter du 2019-01-29) derrière la dernière édition de la spécification .

J'ai déjà vu quelques bons remplissages de ResizeObserver à l'état sauvage, cependant, certains ne suivent pas la spécification à la lettre et d'autres ont des problèmes de calcul.

J'avais désespérément besoin de ce comportement pour créer des composants Web réactifs pouvant être utilisés dans n'importe quelle application. Pour les faire fonctionner correctement, ils ont besoin de connaître leurs dimensions à tout moment. ResizeObservers a donc semblé idéal et j'ai décidé de créer un polyfill qui respecte les spécifications aussi fidèlement que possible.

Repo: https://github.com/juggle/resize-observer

Démo: https://codesandbox.io/s/myqzvpmmy9

2
Trem

Il s’agit à peu près de la copie exacte de la première réponse, mais au lieu d’un lien, c’est la partie du code qui importe, traduite par IMO plus lisible et plus facile à comprendre. Quelques autres petites modifications incluent l’utilisation de cloneNode () et l’absence de code HTML dans une chaîne js. Des petites choses, mais vous pouvez copier et coller ceci tel quel et cela fonctionnera.

Cela fonctionne en faisant en sorte que deux div invisibles remplissent l'élément que vous regardez, puis en leur affectant un déclencheur, puis en définissant une position de défilement qui déclenche un changement de défilement si la taille change.

Tout le mérite revient à Marc J, mais si vous recherchez simplement le code approprié, le voici:

    window.El = {}

    El.resizeSensorNode = undefined;
    El.initResizeNode = function() {
        var fillParent = "display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;";
        var triggerStyle = "position: absolute; left: 0; top: 0; transition: 0s;";

        var resizeSensor = El.resizeSensorNode = document.createElement("resizeSensor");
        resizeSensor.style = fillParent;

        var expandSensor = document.createElement("div");
        expandSensor.style = fillParent;
        resizeSensor.appendChild(expandSensor);

        var trigger = document.createElement("div");
        trigger.style = triggerStyle;
        expandSensor.appendChild(trigger);

        var shrinkSensor = expandSensor.cloneNode(true);
        shrinkSensor.firstChild.style = triggerStyle + " width: 200%; height: 200%";
        resizeSensor.appendChild(shrinkSensor);
    }


    El.onSizeChange = function(domNode, fn) {
        if (!domNode) return;
        if (domNode.resizeListeners) {
            domNode.resizeListeners.Push(fn);
            return;
        }

        domNode.resizeListeners = [];
        domNode.resizeListeners.Push(fn);

        if(El.resizeSensorNode == undefined)
            El.initResizeNode();

        domNode.resizeSensor = El.resizeSensorNode.cloneNode(true);
        domNode.appendChild(domNode.resizeSensor);

        var expand = domNode.resizeSensor.firstChild;
        var expandTrigger = expand.firstChild;
        var shrink = domNode.resizeSensor.childNodes[1];

        var reset = function() {
            expandTrigger.style.width = '100000px';
            expandTrigger.style.height = '100000px';

            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;

            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        };

        reset();

        var hasChanged, frameRequest, newWidth, newHeight;
        var lastWidth = domNode.offsetWidth;
        var lastHeight = domNode.offsetHeight;


        var onResized = function() {
            frameRequest = undefined;

            if (!hasChanged) return;

            lastWidth = newWidth;
            lastHeight = newHeight;

            var listeners = domNode.resizeListeners;
            for(var i = 0; listeners && i < listeners.length; i++) 
                listeners[i]();
        };

        var onScroll = function() {
            newWidth = domNode.offsetWidth;
            newHeight = domNode.offsetHeight;
            hasChanged = newWidth != lastWidth || newHeight != lastHeight;

            if (hasChanged && !frameRequest) {
                frameRequest = requestAnimationFrame(onResized);
            }

            reset();
        };


        expand.addEventListener("scroll", onScroll);
        shrink.addEventListener("scroll", onScroll);
    }
1
Seph Reed

using Bharat Patil answer renvoie simplement false dans le callback de votre bind pour éviter une erreur de pile maximale, voir exemple ci-dessous:

$('#test_div').bind('resize', function(){
   console.log('resized');
   return false;
});
0
White Rabbit

Voici une version simplifiée de la solution de @nkron, applicable à un seul élément (au lieu d'un tableau d'éléments dans la réponse de @ nkron, complexité dont je n'avais pas besoin).

function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}

L'auditeur et l'observateur d'événement peuvent être supprimés par:

window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();
0
Gman

Solution Javascript pure, mais ne fonctionne que si l'élément est redimensionné avec le bouton de redimensionnement css :

  1. stocker la taille des éléments avec offsetWidth et offsetHeight ;
  2. ajouter un écouteur onclick event sur cet élément;
  3. lorsqu’il est déclenché, comparez les noms offsetWidth et offsetHeight actuels avec les valeurs stockées et, s’ils sont différents, faites ce que vous voulez et mettez à jour ces valeurs.
0
roipoussiere
jQuery(document).ready( function($) {

function resizeMapDIVs() {

// check the parent value...

var size = $('#map').parent().width();



if( $size < 640 ) {

//  ...and decrease...

} else {

//  ..or increase  as necessary

}

}

resizeMapDIVs();

$(window).resize(resizeMapDIVs);

});
0
Fábio Zangirolami

C'est une question très ancienne, mais je pensais que je posterais ma solution à cela.

J'ai essayé d'utiliser ResizeSensor puisque tout le monde semblait avoir un gros béguin pour elle. Après la mise en œuvre, j’ai réalisé que sous le capot, la requête sur l’élément nécessite que l’élément en question se voit appliquer la position relative ou absolute, ce qui n’a pas fonctionné dans mon cas.

J'ai fini par gérer cela avec un Rxjs interval au lieu d'un simple setTimeout ou requestAnimationFrame comme les implémentations précédentes. 

Ce qui est bien dans la saveur observable d’un intervalle, c’est que vous pouvez modifier le flux, mais vous pouvez gérer n’importe quel autre observable. Pour moi, une implémentation de base suffisait, mais vous pouviez devenir fou et faire toutes sortes de fusions, etc.

Dans l'exemple ci-dessous, je suis en train de suivre les changements de largeur de la division interne (verte). Il a une largeur définie à 50%, mais une largeur maximale de 200px. Faire glisser le curseur affecte la largeur de la div du wrapper (gris). Vous pouvez voir que l'observable ne se déclenche que lorsque la largeur de la div interne change, ce qui ne se produit que si la largeur de la div externe est inférieure à 400px.

const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;


const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');




function subscribeToResize() {
  const timer = interval(100);
  const myDiv = document.getElementById('my-div');
  const widthElement = document.getElementById('width');
  const isMax = document.getElementById('is-max');
  
  /*
    NOTE: This is the important bit here 
  */
  timer
    .pipe(
      map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
      distinctUntilChanged(),
      // adding a takeUntil(), here as well would allow cleanup when the component is destroyed
    )
      .subscribe((width) => {        
        widthElement.innerHTML = width;
        isMax.innerHTML = width === 200 ? 'Max width' : '50% width';

      });
}

function defineRange() {
  input.min = 200;
  input.max = window.innerWidth;
  input.step = 10;
  input.value = input.max - 50;
}

function bindInputToWrapper() {
  input.addEventListener('input', (event) => {
    wrapper.style.width = `${event.target.value}px`;
  });
}

defineRange();
subscribeToResize();
bindInputToWrapper();
.inner {
  width: 50%;
  max-width: 200px;
}




/* Aesthetic styles only */

.inner {
  background: #16a085;
}

.wrapper {
  background: #ecf0f1;
  color: white;
  margin-top: 24px;
}

.content {
  padding: 12px;
}

body {
  
  font-family: sans-serif;
  font-weight: bold;
}
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<h1>Resize Browser width</h1>

<label for="width-input">Adjust the width of the wrapper element</label>
<div>
  <input type="range" id="width-input">
</div>

<div id="my-wrapper" class="wrapper">
  <div id="my-div" class="inner">
    <div class="content">
      Width: <span id="width"></span>px
      <div id="is-max"></div>  
    </div>
  </div>
</div>

0
Scrimothy