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
521415 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

30voto

Alessandro Vendruscolo Punkte 13749

Sie müssen die resize Ereignis auf der window Objekt, nicht auf ein allgemeines HTML-Element.

Sie könnten dann dies verwenden:

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

und innerhalb der Callback-Funktion können Sie die neue Breite Ihrer div aufrufen

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

Die Antwort auf Ihre Frage lautet also keine können Sie nicht die resize Ereignis auf ein div.

Beantwortet el 27 de Juni, 2011 von Alessandro Vendruscolo (13749 Punkte )

Answer 3

16voto

Stan Punkte 2111

Die beste Lösung wäre die Verwendung der so genannten Element-Abfragen . Allerdings sind sie nicht standardisiert, es gibt keine Spezifikation - und die einzige Möglichkeit ist, eine der verfügbaren Polyfills/Bibliotheken zu verwenden, wenn Sie diesen Weg gehen wollen.

Die Idee hinter den Elementabfragen ist es, einem bestimmten Container auf der Seite zu ermöglichen, auf den ihm zur Verfügung gestellten Platz zu reagieren. Dies ermöglicht es, eine Komponente einmal zu schreiben und sie dann irgendwo auf der Seite abzulegen, während sie ihren Inhalt an ihre aktuelle Größe anpasst. Unabhängig von der Größe des Fensters. Dies ist der erste Unterschied zwischen Elementabfragen und Medienabfragen. Jeder hofft, dass irgendwann eine Spezifikation erstellt wird, die Element-Queries standardisiert (oder etwas, das das gleiche Ziel erreicht) und sie nativ, sauber, einfach und robust macht. Die meisten Leute sind sich einig, dass Media-Queries ziemlich begrenzt sind und nicht zu einem modularen Design und echter Reaktionsfähigkeit beitragen.

Es gibt einige Polyfills/Bibliotheken, die das Problem auf unterschiedliche Weise lösen (man könnte sie auch als Workarounds statt als Lösungen bezeichnen):

CSS-Element-Abfragen - https://github.com/marcj/css-element-queries
BoomQueries - https://github.com/BoomTownROI/boomqueries
eq.js - https://github.com/Snugug/eq.js
ElementQuery - https://github.com/tysonmatanich/elementQuery
Und noch einige mehr, die ich hier nicht aufzählen werde, aber es steht Ihnen frei, danach zu suchen. Ich bin nicht in der Lage zu sagen, welche der derzeit verfügbaren Optionen die beste ist. Sie müssen einige davon ausprobieren und dann entscheiden.

Ich habe schon andere Lösungen für ähnliche Probleme vorgeschlagen gesehen. In der Regel verwenden sie Timer oder die Fenster-/Bildschirmgröße unter der Haube, was keine echte Lösung ist. Außerdem denke ich, dass dies idealerweise hauptsächlich in CSS und nicht in Javascript oder HTML gelöst werden sollte.

Beantwortet el 13 de Juli, 2015 von Stan (2111 Punkte )

Answer 4

16voto

joshcomley Punkte 27192

Diese Bibliothek hat funktioniert, als die Lösung von MarcJ nicht funktionierte:

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

Es ist sehr leichtgewichtig und erkennt sogar natürliche Größenänderungen über CSS oder einfach das Laden/Rendering von HTML.

Codebeispiel (aus dem Link):

<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>

Beantwortet el 17 de Februar, 2016 von joshcomley (27192 Punkte )

Answer 5

11voto

Bharat Patil Punkte 1378

Schauen Sie sich das an http://benalman.com/code/projects/jquery-resize/examples/resize/

Sie enthält verschiedene Beispiele. Versuchen Sie, die Größe Ihres Fensters zu ändern und sehen Sie, wie die Elemente innerhalb der Container-Elemente angepasst werden.

Beispiel mit js fiddle, um zu erklären, wie man es zum Laufen bringt.
Schauen Sie sich diese Fiedel an http://jsfiddle.net/sgsqJ/4/

In diesem resize()-Ereignis ist an ein Element der Klasse "test" und auch an das Fensterobjekt gebunden und im Resize-Callback des Window-Objekts wird $('.test').resize() aufgerufen.

たとえば

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

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

Beantwortet el 27 de Juni, 2011 von Bharat Patil (1378 Punkte )

Answer 6

10voto

Aikon Mogwai Punkte 4393

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>

Beantwortet el 4 de Oktober, 2017 von Aikon Mogwai (4393 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: