Using the Resize Observer API in Javascript
The ResizeObserver API lets you create an object that will watch dimension changes to the content box of any specified element node
To use it you need, in the following order, to do as proceeds:
1) Design the callback:
A callback function that will be called every time one of the observed elements’ size changes, it receives an array of “entry” objects as its argument, where every entry object has a “target” property (i.e. entry.target) that returns the element that underwent the size change
e.g.:
let observerCallback = function (arrayOfEntries) { arrayOfEntries.forEach( entry => { let oneElementWhoseSizeChanged = entry.target //do stuff with target } ) }
//(this function can also be defined on the spot in step 2), but it’s more //convenient to define it beforehand for easier code management
2) Create instance of ResizeObserver
To create an instance of ResiseObserver and pass to it the previous callback as its argument (i.e. let instance = new ResizeObserver(callback)
e.g.:
let observerInstance = new ResizeObserver (observerCallback)
3) Tell the instance what element nodes to observe
To call the “observe” method of the ResizeObserver instance created, and pass to it as an argument the html element whose size you want to watch (i-e- instance.observe(ElementNode)
e.g.:
let elementToObserve = document.querySelector(”#element-to-observe”) ObserverInstance.observe(elementToObserve)
