Super-optimized cross-browser resize listener for elements.
npm install element-resize-detector
Include the script in the browser:
<!DOCTYPE hml>
<html>
<head></head>
<body>
<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
</body>
</html>This will create a global function elementResieDetectorMaker, which is the maker function that makes an element resize detector instance.
You can also require it like so:
var elementResizeDetectorMaker = require("element-resize-detector");//With default options (will use the object-based approach).
var erdDefault = elementResizeDetectorMaker();
//With the experimental super fast scroll-based approach.
var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll" //<- For ultra performance.
});Listens to the element for resize events and calls the listener function with the element as argument on resize events.
Example usage:
erd.listenTo(document.getElementById("test"), function(element) {
//Should probably use jQuery for the width and height for compability.
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log("Size: " + width + "x" + height);
});Caveats:
- If the element has
display: staticit will be changed todisplay: relative. This means if you have unintentionaltop/right/bottom/leftstyles on the element (which was ignored when beingstatic) they will now be applied to the element. This will also mean that if there are any elements withposition: absoluteas children to the element, they will now be positioned relative to the element. - An
<object>element will be injected as a direct child to the element. It hasposition: absoluteso it will not affect the page flow. It is also visibly hidden.
This library is using the two approaches (scroll and object) as first described at http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/.
The scroll based approach implementation was based on Marc J's implementation https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js.
Please note that both approaches have been heavily reworked for better performance and robustness.