85 lines
2.1 KiB
HTML
85 lines
2.1 KiB
HTML
<!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>
|