112 lines
2.7 KiB
HTML
112 lines
2.7 KiB
HTML
<!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>
|