Jak wykryć zmianę rozmiaru dowolnego elementu w HTML5

Question

Jakie powinny być najlepsze praktyki do nasłuchu na zdarzeniu zmiany rozmiaru elementu?

Chcę zmienić pozycję elementu (okno dialogowe jQuery w moim przypadku) po zmianie rozmiaru. Ale teraz jestem bardziej zainteresowany ogólnym sposobem, aby odsłuchać zmianę rozmiaru zdarzenia, nie zdając sobie sprawy z tego, jak zmienia się rozmiar. To niby ma być prosty, aż znalazłem element może być zmieniany przez

• okno rozmiaru
• zawartość tekstu zmienia
• dzieci elementów lub ich elementy dzieci zmieniany
• element rodzeństwo zmiany rozmiaru (np komórka w tabeli)
• JavaScript zmienia go src (IMG)/atrybutu stylu bezpośrednio (lub jego dziecka)
• JavaScript przepisać reguł CSS lub stylów
• rodzimy textarea funkcja zmiany rozmiaru lub CSS3 resize
• przeglądarki zoom lub tekstu powiększyć
• CSS przejścia lub animacji (przez: najechaniu lub inny średni)

w normie de facto, nie jest wydarzeniem window.onresize aby zasubskrybować rozmiar na oknie/ramce. Ale nie ma standardowego zdarzenia w treści HTML lub elementach DOM.

spotykam następującej myśli

• DOM Level 3 cel zdarzenia tylko od rodzaju okna/dokumentu
• IE ma onresize dla elementów, ale to tylko IE realizacja
• MutationObserver które zastępują Mutation Events, ale robi nie pasuje do potrzeby "onresize"
• naiwny JavaScript sondowanie

MutationObserver jest blisko (wewnętrzne zmiany DOM), ale nie przepuszcza (jeszcze) przeglądarki (IE10 nie obsługuje) i generuje szum, a nie CSS.

Ankieta JavaScript naiwne powinna działać we wszystkich przypadkach, ale generuje opóźnienie lub marnowanie CPU na wiele ankiet.

Answer 1

Tak, nie jest to proste rozwiązanie, to nie jest dobre.

Znalazłem coś bardzo przydatna dla .: cross browser event based element resize

To trudne, dołączając jakiś potrzebny HTML do elementu, które muszą być słuchane i wykrywa przewijania wydarzenie.

Niektóre html przykład z tej strony:

<div class="resize-triggers"> 
    <div class="expand-trigger"><div></div></div> 
    <div class="contract-trigger"></div> 
</div> 

także niektóre JS:

var myElement = document.getElementById('my_element'), 
    myResizeFn = function(){ 
     /* do something on resize */ 
    }; 
addResizeListener(myElement, myResizeFn); 
removeResizeListener(myElement, myResizeFn); 

ale działa na elementy te są w stanie mieć dzieci, a nie dla siebie zamknięciem tagi.

można zobaczyć demo http://jsfiddle.net/3QcnQ/67/

Answer 2

Cóż, nie jest to łatwe, że biblioteka. Chociaż nie ma nic oficjalnego, jak słuchać na zmiany wymiarów wszystkich typów elementów i tylko window obsługuje go w tej chwili mamy szczęśliwie polifill dla tego, który działa bardzo dokładne i obsługuje wszystkie przeglądarki nawet włącznie IE6 +.

https://github.com/marcj/css-element-queries

Można znaleźć tam klasę ResizeSensor. Aby ustawić słuchacz na elemencie można po prostu zrobić:

new ResizeSensor($('.myelements'), function() { 
    console.log('changed'); 
});