Skip to content

Instantly share code, notes, and snippets.

@tresf

tresf/overflow.html

Last active February 5, 2019 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tresf/06582f02310a3e5841f967690f8374bc to your computer and use it in GitHub Desktop.
Save tresf/06582f02310a3e5841f967690f8374bc to your computer and use it in GitHub Desktop.
Download ZIP
QZ Tray HTML Overflow
Raw
overflow.html
<html>
<head>
<script>
/**
* Nudges divs named "overflow" to flow onto the next page
*
* Author: Tres Finocchiaro, 2019-02-05
* License: Public Domain (use as you wish)
*
* TODO: Fix elements cutoff mid-page, is this even possible?
*/
document.addEventListener("DOMContentLoaded", function(event) {
var height = "6in";
// Use a base-10 measuring system that can handle addition :)
var pxHeight = measure(height);
console.log("Using", height, "=", pxHeight, "px for overflow");
// Assume divs named "overflow" are the preferred container, change as needed
var divs = document.getElementsByName("overflow");
// Large incriments save several hundred calculations :)
var steps = [1024, 512, 256, 128, 64, 32, 16, 4, 2, 1];
// Increase div height to force page-overflow
var prev = divs.length > 0 ? divs[0] : null;
for (var i = 1; i < divs.length; i++) {
// nudge until it's the next page
var steps = [1024, 512, 256, 128, 64, 32, 16, 4, 2, 1];
for (var j = 0; j < steps.length; j++) {
while(Math.round((steps[j] + getTop(divs[i])) % pxHeight) > steps[j]) {
prev.style.height = pixels(getComputedStyle(prev).getPropertyValue("height")) + steps[j];
}
}
prev = divs[i];
}
});
var getTop = function(element) {
return element.getBoundingClientRect().top + window.pageYOffset - document.documentElement.clientTop;
}
var measure = function(unit) {
var ruler = document.createElement('div');
ruler.id = "ruler";
ruler.style.margin = ruler.style.padding = 0;
ruler.style.height = unit;
document.body.appendChild(ruler);
var height = getComputedStyle(ruler).getPropertyValue("height");
document.body.removeChild(ruler);
return pixels(height);
}
// Convert "1px" to 1
var pixels = function(px) {
return parseInt(px.split("px")[0], 10);
}
</script>
<style>
html, body, div { padding: 0; margin: 0; }
div { width: 8in; }
#blue { background-color: lightblue; }
#green { background-color: lightgreen; }
#pink { background-color: lightpink; }
#yellow { background-color: lightgoldenrodyellow; }
</style>
</head>
<div name="overflow" id="blue">
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
</div>
<div name="overflow" id="green">
<h1>normal div</h1>
</div>
<div name="overflow" id="pink">
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
<h1>overflow div</h1>
</div>
<div name="overflow" id="yellow">
<h1>normal div</h1>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment