| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| html, body { |
| height: 100%; |
| } |
| |
| #aligner { |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| #container { |
| width: 50%; |
| height: 50%; |
| background: #FF9800; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| position: relative; |
| } |
| |
| #dimensions { |
| font-size: 3em; |
| color: #FFF; |
| } |
| |
| #dim-x, #dim-y { |
| color: #263248; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div id="aligner"> |
| <div id="container"> |
| <div id="dimensions"> |
| <span id="dim-x"></span>x<span id="dim-y"></span> |
| </div> |
| </div> |
| </div> |
| |
| <script src="../node_modules/jquery/dist/jquery.min.js"></script> |
| <script src="../build/element-resize-detector.js"></script> |
| <script> |
| $(function onDomReady() { |
| function updateDimensions(element) { |
| var style = getComputedStyle(element); |
| var width = parseInt(style.width); |
| var height = parseInt(style.height); |
| $("#dim-x").html(width); |
| $("#dim-y").html(height); |
| } |
| |
| var container = $("#container"); |
| |
| var erd = elementResizeDetectorMaker({ |
| strategy: "scroll", |
| callOnAdd: true, |
| debug: true |
| }); |
| erd.listenTo(container, updateDimensions); |
| |
| container.click(function onContainerClick() { |
| function rand(min, max) { |
| return Math.floor(Math.random() * (max - min + 1)) + min; |
| } |
| |
| var width = rand(30, 90); |
| var height = rand(30, 90); |
| |
| $(this).css({ |
| width: width + "%", |
| height: height + "%" |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
