I've got a div that contains some content that's being added and removed dynamically, so its height is changing often. I also have a div that is absolutely positioned directly underneath with javascript, so unless I can detect when the height of the div changes, I can't reposition the div below it.
So, how can I detect when the height of that div changes? I assume there's some jQuery event I need to use, but I'm not sure which one to hook into.
You can use the DOMSubtreeModified event
$(something).bind('DOMSubtreeModified' ...
But this will fire even if the dimensions don't change, and reassigning the position whenever it fires can take a performance hit. In my experience using this method, checking whether the dimensions have changed is less expensive and so you might consider combining the two.
Or if you are directly altering the div (rather than the div being altered by user input in unpredictable ways, like if it is contentEditable), you can simply fire a custom event whenever you do so.
Downside: IE and Opera don't implement this event.
These days you can also use the Web API ResizeObserver.
Simple example:
const myElement = document.querySelector('#myElement');
const resizeObserver = new ResizeObserver(() => {
console.log('size of myElement changed');
});
resizeObserver.observe(myElement);