inline.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="../build/element-resize-detector.js"></script>
  5. </head>
  6. <body>
  7. <div>
  8. <span id="resize">
  9. <span id="textContent"></span>
  10. </span>
  11. </div>
  12. <div style="margin-top: 15px">
  13. elementResizeDetector width <span id="erdSize"></span>px
  14. </div>
  15. <button style="margin-top: 15px" id="resizeBtn">
  16. Resize
  17. </button>
  18. <script>
  19. // Code goes here
  20. var textContent = document.getElementById('textContent')
  21. document.getElementById('resizeBtn').addEventListener('click', function(event) {
  22. textContent.textContent = textContent.textContent + '1';
  23. });
  24. var detector = elementResizeDetectorMaker({
  25. debug: true,
  26. strategy: "scroll"
  27. });
  28. var resizeElement = document.getElementById('resize');
  29. detector.listenTo(resizeElement, function(element) {
  30. document.getElementById('erdSize').textContent = element.offsetWidth;
  31. });
  32. </script>
  33. </body>
  34. </html>