How to detect DIV’s dimension changed?

by

A new standard for this is the Resize Observer api, available in 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>

Resize Observer

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

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

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

Polyfills: https://github.com/pelotoncycle/resize-observer
https://github.com/que-etc/resize-observer-polyfill
https://github.com/juggle/resize-observer

More Related Contents:

  1. .val() don't edit input
  2. Write tags in HTML and print
  3. Any Javascript GURU here to make this Script ? If Anchor is Changed Redirect the Page
  4. jquery get id of input selected text
  5. jQuery Data vs Attr?
  6. jQuery ID selector works only for the first element
  7. Get class list for element with jQuery
  8. horizontal scrollbar on top and bottom of table
  9. Persisting the changes of range objects after selection in HTML
  10. Set custom HTML5 required field validation message
  11. Show and hide divs at a specific time interval using jQuery
  12. How do I detect “shift+enter” and generate a new line in Textarea?
  13. Adding additional data to select options using jQuery
  14. HTML5 dragleave fired when hovering a child element
  15. HTML5 Local Storage fallback solutions [closed]
  16. jQuery $(“#radioButton”).change(…) not firing during de-selection
  17. :touch CSS pseudo-class or something similar?
  18. Multiple Select limit number of selection
  19. Search and Highlight in jQuery
  20. Is it possible to add html inside a title attribute?
  21. Trigger standard HTML validation (form) without using submit button? [duplicate]
  22. How do I detect the inherited background-color of an element using jQuery/JS?
  23. how to use jQuery ajax calls with node.js
  24. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  25. Rotate div text after clicking on button using jquery and css
  26. How to access jQuery in HTML 5 web worker
  27. Hot to get incomplete datetime-local input values
  28. Incrementing value continuously on mouse hold
  29. Content of html page changed by jQuery but “View Source” don’t reflect the changes
  30. Do duplicate ID values screw up jQuery selectors?

Leave a Comment