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
521419 Ansichten: Anzahl der Besuche der Frage
3 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

3 Antworten

Answer 2

0voto

Dorian Punkte 4209

Mit disconnect um den Ereignis-Listener zu entfernen:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input", "context", "output"]

  connect() {
    this.inputObserver = new ResizeObserver(() => { this.resizeInput() })
    this.inputObserver.observe(this.inputTarget)
  }

  disconnect() {
    this.inputObserver.disconnect(this.inputTarget)
  }

  resizeInput() {
    const height = this.inputTarget.offsetHeight

    this.contextTarget.style.height = `${height}px`
    this.outputTarget.style.height = `${height}px`
  }
}

Beantwortet el 2 de September, 2022 von Dorian (4209 Punkte )

Answer 3

-1voto

PixelPimp Punkte 75

Ich dachte, es könnte nicht getan werden, aber dann habe ich darüber nachgedacht, können Sie manuell die Größe eines div über style="resize: both;", um zu tun, dass Sie ave, um darauf zu klicken, so fügte eine onclick-Funktion, um Höhe und Breite des Elements zu überprüfen und es funktioniert. Mit nur 5 Zeilen reinem Javascript (sicher könnte es noch kürzer sein) http://codepen.io/anon/pen/eNyyVN

<div id="box" style="
                height:200px; 
                width:640px;
                background-color:#FF0066;
                resize: both;
                overflow: auto;" 
                onclick="myFunction()">
    <p id="sizeTXT" style="
                font-size: 50px;">
       WxH
    </p>
    </div>

<p>This my example demonstrates how to run a resize check on click for resizable div.</p>

<p>Try to resize the box.</p>

<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>

Beantwortet el 29 de Juni, 2015 von PixelPimp (75 Punkte )

Answer 4

-1voto

rbtbar Punkte 87

Nur Window.onResize in der Spezifikation vorhanden ist, aber Sie können jederzeit die IFrame zur Erzeugung neuer Window Objekt innerhalb Ihres DIV.

Bitte prüfen Sie dies respuesta . Es gibt eine neue kleine Jquery-Plugin das tragbar und einfach zu bedienen ist. Sie können jederzeit den Quellcode überprüfen, um zu sehen, wie es gemacht wird.

<!-- (1) include plugin script in a page -->
<script src="/src/jquery-element-onresize.js"></script>

// (2) use the detectResizing plugin to monitor changes to the element's size:
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize });

// (3) write a function to react on changes:
function monitoredElement_onResize() {    
    // logic here...
}

Beantwortet el 10 de September, 2014 von rbtbar (87 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: