40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
<!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>
|