Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Question

Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Gefragt el 27 de Juni, 2011: Wann wurde die Frage gestellt
521417 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe die folgende Beispiel-HTML, gibt es eine DIV, die 100% Breite hat. Es enthält einige Elemente. Bei der Größenänderung von Windows können die inneren Elemente neu positioniert werden, und die Größe des DIVs kann sich ändern. Ich frage, ob es möglich ist, die div's Dimension Änderung Ereignis Haken? und wie man das tun? Ich binde derzeit die Callback-Funktion an das jQuery-Resize-Ereignis auf dem Ziel-DIV, jedoch wird kein Konsolenprotokoll ausgegeben, siehe unten:

Before Resize enter 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>

Gefragt el 27 de Juni, 2011 von William X

Answer 1

5 Antworten

Answer 2

3voto

Ben Gripka Punkte 15106

Dieser Blogbeitrag hat mir geholfen, Größenänderungen an DOM-Elementen effizient zu erkennen.

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

Wie man diesen Code benutzt...

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

Gepackter Code für das Beispiel...

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

Hinweis: AppConfig ist ein Namensraum/Objekt, das ich zum Organisieren wiederverwendbarer Funktionen verwende. Sie können den Namen nach Belieben durchsuchen und durch etwas anderes ersetzen.

Beantwortet el 22 de Marsch, 2016 von Ben Gripka (15106 Punkte )

Answer 3

2voto

Dustin Poissant Punkte 2885

Mein jQuery-Plugin aktiviert das "Resize"-Ereignis für alle Elemente, nicht nur für das window .

https://github.com/dustinpoissant/ResizeTriggering

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

Beantwortet el 11 de August, 2016 von Dustin Poissant (2885 Punkte )

Answer 4

2voto

Nicht registrierter Benutzer Punkte 0

Sie können den Code im folgenden Schnipsel versuchen, es deckt Ihre Bedürfnisse mit einfachen Javascript. ( Führen Sie das Code-Snippet aus und klicken Sie auf den Link "Full Page", um die Meldung auszulösen, dass die Größe des Divs geändert wurde, wenn Sie es testen möchten. ).

Aufgrund der Tatsache, dass es sich um eine setInterval von 100 Millisekunden, würde ich es wagen zu sagen, dass mein PC es nicht zu sehr CPU-hungrig fand (0,1% der CPU wurde insgesamt für alle geöffneten Tabs in Chrome zum Zeitpunkt des Tests verwendet). Aber dann wieder dies ist für nur ein div, wenn Sie möchten, tun dies für eine große Menge von Elementen dann ja es könnte sehr CPU hungrig sein.

Sie könnten immer ein Klick-Ereignis verwenden, um die div-resize zu stoppen Schnüffeln sowieso.

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>

Sie können die fiddle auch

アップデイト

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>

Aktualisiert Geige

Beantwortet el 24 de November, 2016 von Nicht registrierter Benutzer (0 Punkte )

Answer 5

2voto

Seph Reed Punkte 6186

Dies ist so ziemlich eine exakte Kopie der oberen Antwort, aber anstelle eines Links ist es nur der Teil des Codes, auf den es ankommt, übersetzt, damit er IMO besser lesbar und leichter zu verstehen ist. Ein paar andere kleine Änderungen sind die Verwendung von cloneNode() und das Weglassen von html in einem js-String. Kleine Dinge, aber Sie können kopieren und fügen Sie diese wie ist und es wird funktionieren.

Die Art und Weise, wie es funktioniert, ist durch zwei unsichtbare divs füllen das Element, das Sie beobachten, und dann setzen einen Auslöser in jedem, und die Einstellung einer Scroll-Position, die zum Auslösen einer Scroll-Änderung, wenn die Größe ändert führen wird.

Die eigentliche Anerkennung geht an Marc J., aber wenn Sie nur nach dem entsprechenden Code suchen, finden Sie ihn hier:

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

Beantwortet el 25 de Juni, 2017 von Seph Reed (6186 Punkte )

Answer 6

2voto

roipoussiere Punkte 4010

Reine Javascript-Lösung, funktioniert aber nur, wenn die Größe des Elements mit der css-Schaltfläche zur Größenänderung :

Elementgröße speichern mit OffsetBreite y offsetHeight ;
einfügen onclick Ereignis-Listener für dieses Element;
wenn ausgelöst, vergleiche aktuelles offsetWidth y offsetHeight mit den gespeicherten Werten vergleichen und, falls sie sich unterscheiden, die Werte aktualisieren.

Beantwortet el 5 de Juni, 2019 von roipoussiere (4010 Punkte )

Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: