<!DOCTYPE html>
<html>
<head>
<script src="../build/element-resize-detector.js"></script>
</head>
<body>
<div>
<span id="resize">
<span id="textContent"></span>
</span>
</div>
<div style="margin-top: 15px">
elementResizeDetector width <span id="erdSize"></span>px
</div>
<button style="margin-top: 15px" id="resizeBtn">
Resize
</button>
<script>
// Code goes here
var textContent = document.getElementById('textContent')
document.getElementById('resizeBtn').addEventListener('click', function(event) {
textContent.textContent = textContent.textContent + '1';
});
var detector = elementResizeDetectorMaker({
debug: true,
strategy: "scroll"
});
var resizeElement = document.getElementById('resize');
detector.listenTo(resizeElement, function(element) {
document.getElementById('erdSize').textContent = element.offsetWidth;
});
</script>
</body>
</html>