How to detect resize of any element in HTML5

div resize event
resizeobserver
angular component resize event
angular resizeobserver
jquery detect div resize
iframe resize event
window.onresize not working
div resize event listener

What should the best practices to listen on element resize event?

I want to re-position an element (jQuery dialog in my case), once it's size changed. But I am now more interested to do in a general way to to listen to resize event, unaware of how the resize happens. It suppose to be simple until I found an element can be re-sized by

  • window resize
  • content text changes
  • children elements or their children elements resized
  • a sibling element resize (e.g. a cell in a table)
  • JavaScript changes it src(of img)/style attribute directly (or it's child's)
  • JavaScript rewrite CSS rules or stylesheet
  • native resize feature textarea or CSS3 resize
  • browser's zoom or text-enlarge
  • CSS transition or animations (by :hover or any other mean)

In the de-facto standard, there is a event window.onresize to subscribe resize on a window/frame. But there is no a standard event on the HTML content or DOM Elements.

I come across the following thought

MutationObserver is close(inner DOM changes), but it does not (yet) cross browser (IE10 does not support) and it generate noise, not CSS aware.

A naive JavaScript polling should work in all case, but it generate either delay or CPU waste of many poll.

FYI, there's a proposed spec for a new ResizeObserver API. Chrome seems to be the only browser that has implemented it as of Aug 2018 (see caniuse.com), but there's at least one polyfill you can use now (which uses MutationObserver).

onresize Event, The onresize event occurs when the browser window has been resized. Tip: To get the size of an element, use the clientWidth, clientHeight, innerWidth,  The onresize event occurs when the browser window has been resized. Tip: To get the size of an element, use the clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.

Yes there is not simple solution, that's not good.

I've found something very useful for this.: cross browser event based element resize

It's tricky, appending some needed html to the element that have to be listened and detects scrolling event.

Some html example from that page:

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

Also Some JS:

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

But it works for elements those are able to have children, not for self-closing tags.

You can see the demo http://jsfiddle.net/3QcnQ/67/

Window: resize event, There is a proposal to allow all elements to be notified of resize changes. See Resize The following example reports the window size each time it is resized. Bear in Obsolete. CSS Object Model (CSSOM) View Module To enable our resize listening magic, we inject an object element into the target element, set a list of special styles to hide it from view, and monitor it for resize – it acts as a trigger for alerting us when the target element parent is resized.

Well, there is a easy library for that. Although there's nothing official how to listen on dimension changes of all types of elements and only window supports it at the moment we have luckily a polifill for that that works very accurate and supports all browsers even inclusive IE6+.

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

You can find there a class ResizeSensor. To setup a listener on a element you can just do:

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

Any HTML Element Resize Event, Want to have an 'onresize' event for any HTML element? Now you have it, even without timer! repo: is.gd/meyfMN This project is basically a modified version of sdecima/javascript-detect-element-resize including these changes: Try to utilize native ResizeObserver first. Adopt Mutation-based approach to track detaching/attaching in both DOM trees and render trees (see que-etc/resize-observer-polyfill ).

Given yourelement, when the size changes (ex. a text translation took place) you can doyourstuff(), including ro.unobserve(yourelement);

  var inilen = yourelement.offsetWidth;
  var ro = new ResizeObserver( entries => {
    for (let entry of entries) {
      const cr = entry.contentRect;
      if (inilen !== cr.width) {
        doyourstuff();        
      }
    }
  });

  ro.observe(<your element>);

How to detect resize of any element in HTML5, What should the best practices to listen on element resize event? I want to re-​position an element (jQuery dialog in my case), once it's size changed. But I am  Only Window.onResize exists in the specification. Please remember that every IFrame element creates new Window object which supports onResize.Therefore IMO the most reliable method to detect changes to the element's size is to append hidden iframes to the element.

ResizeObserver: it's like document.onresize for elements, ResizeObserver lets you know when an element's size changes. Before ResizeObserver , you had to attach a listener to the document's resize event to get notified of any change of the A diagram of the CSS box model. I have a canvas element defined statically in the html with a width and height. If I attempt to use JavaScript to resize it dynamically (setting a new width and height - either on the attributes of

A Look at the Resize Observer JavaScript API, In other words, using window.resize is often wasteful because it informs us of every viewport size change, not just when an element's size actually changes. The user cannot resize the element: Play it » both: The user can resize both the height and width of the element: Play it » horizontal: The user can resize the width of the element: Play it » vertical: The user can resize the height of the element: Play it » initial: Sets this property to its default value. Read about initial: Play it

How to detect the change in DIV's dimension ?, The ResizeObserver Interface is used to report changes in dimensions of an element. The element to be tracked is first selected using jQuery. A ResizeObserver  Internet Explorer provides a resizeEnd event. Other browsers will trigger the resize event many times while you're resizing. There are other great answers here that show how to use setTimeout and the .throttle, .debounce methods from lodash and underscore, so I will mention Ben Alman's throttle-debounce jQuery plugin which accomplishes what you're after.

Comments
  • I posted an overview of libraries that do this at stackoverflow.com/q/37113134/1026
  • only if it helps :)))
  • Where does addResizeListener and removeResizeListener functions come from? The answer doesn't provide the entire solution. It's a bad practice to hide vital information behind links, because they could break in the future.
  • HI @SlavaFominII agree but, I could not just copy whole article from the link though, but I could add it as comment as well. Noted and will consider in the future. Thanks
  • I cannot get this to work on an element contained in a shadowroot.
  • I can't get this to work either. It does not fire if I change the dimensions of an element using JS or even if the element is responsive and changes dimensions due to window size change