How to detect resizing of any element in HTML5

Question

What should be the experience with the element resize event?

I want to override an element (jQuery dialog in my case) after resizing. But now I’m more interested in doing a general way of listening for a resize event, not knowing how to resize. Suppose it's simple until I find an item that can be changed to

• window resizing
• Content Text Changes Elements
• child elements or their child elements changed
• resize an element (for example, a cell in a table)
• JavaScript changes the src (img) / style attribute directly (or its children)
• JavaScript rewrites CSS rules or stylesheet
• inline resizing textarea or resizing CSS3
• browser scale or text zoom
• CSS transition or animation (by: hovering or any other average value)

There is a de facto window.onresize event in the standard to subscribe to window / frame resizing. But there is no standard event in HTML content or DOM elements.

I come across the following thought

• DOM Level 3 event object by window / document type only
• IE has onresize for Elements, but it is only an implementation of IE
• MutationObserver that replace mutation events , but this does not match the need for "onresize"
• naive javascript poll

MutationObserver is close (internal DOM changes), but it is (so far) a cross browser (IE10 does not support) and it generates noise, not CSS.

A naive JavaScript poll should work in all cases, but it generates either latency or CPU waste from many polls.

Answer 1

Well, there is a simple library for this. Although there is nothing official, how to listen to the resizing of all types of elements, and only window supports it at the moment when we are lucky that it works very well and supports all browsers even IE6 + inclusive.

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

You can find there the class ResizeSensor . To set the listener to an element that you can simply do:

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

Answer 2

Yes, there is no simple solution, this is not good.

I found something very useful for myself: resize an element based on a cross browser

This is tricky by adding some necessary html to the element to be listened to and detects a scroll event.

Html example from this 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 that may have children, not for self-closing tags.

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

Answer 3

For your information, there is a proposed specification for the new ResizeObserver API. It seems that Chrome is the only browser that has implemented it as of August 2018 (see Caniuse.com ), but now there is at least one polyfill that you can use (which uses MutationObserver ).

Answer 4

You can change your text or content or attribute depending on the screen size: HTML:

 <p class="change">Frequently Asked Questions (FAQ)</p> <p class="change">Frequently Asked Questions </p> 

Javascript:

 <script> const changeText = document.querySelector('.change'); function resize() { if((window.innerWidth<500)&&(changeText.textContent="Frequently Asked Questions (FAQ)")){ changeText.textContent="FAQ"; } else { changeText.textContent="Frequently Asked Questions (FAQ)"; } } window.onresize = resize; </script>