<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
#aligner {
height: 100%;
display: flex;
}
.container {
width: 20%;
background: #FF9800;
cursor: pointer;
position: relative;
border-right: 1px solid black;
border-left: 1px solid black;
}
.container.elq-width-under-200 {
height: 200px;
}
.container.elq-width-above-200 {
height: 400px;
}
#dimensions {
font-size: 3em;
color: #FFF;
}
#dim-x, #dim-y {
color: #263248;
}
</style>
</head>
<body>
<button onclick="resize()">Resize</button>
<div id="aligner">
</div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../build/element-resize-detector.js"></script>
<script>
var alignerWidth = 100;
var cnt = 0;
function resize() {
if(alignerWidth === 100) {
alignerWidth = 50;
} else {
alignerWidth = 100;
}
$("#aligner").width(alignerWidth + "%");
console.time("resize");
}
$(function() {
function onElementResize(element) {
if(++cnt === numElements) {
cnt = 0;
console.timeEnd("resize");
}
}
function createDiv(width) {
var d = document.createElement("div");
d.className = "container";
d.style.width = width;
return d;
}
function loopCreateAndAppend(numNested, create, target) {
for(var i = 0; i < numNested; i++) {
var d = create();
target.appendChild(d);
}
return target;
}
var numElements = 200;
loopCreateAndAppend(numElements, createDiv.bind(null, numElements), document.getElementById("aligner"));
(function listenToResize() {
var erd = elementResizeDetectorMaker({
strategy: "scroll"
});
console.time("install");
erd.listenTo({
callOnAdd: false,
onReady: function onReady() {
console.timeEnd("install");
console.log("ready");
}
}, $(".container"), onElementResize);
})();
});
</script>
</body>
</html>