Tickling Chrome Flex

by Jools Chadwick

HTML

<div id="gottapaythescrolltoll">
  <ol id="flexymcbexy">
    <li>I'm a list item</li>
    <li>I'm also a list item</li>
    <li>We're all list items</li>
    <li>You don't know me!</li>
    <li>You can't ignore my girth</li>
    <li>Chrome can</li>
    <li>Ahahahaha</li>
    <li>ohohohohoho</li>
    <li>teehee</li>
    <li id="lastitem">I'm a list item</li>
  </ol>
</div>

<div id="buttonholder">
  <input id="shorter" type="button" value="Shorter"/>
  <input id="taller" type="button" value="Taller"/>
  <input id="widthtickler" type="button" value="Tickle my width"/>
  <input id="solve" type="button" value="Solve"/>
  <input id="magic"/>
</div>

CSS

#gottapaythescrolltoll{
  overflow:auto;
  border:solid black 1px;
}

#flexymcbexy{
  display:flex;
  flex-flow: column wrap;
  list-style-type: none;
  height:100%;
  margin:0px;
  padding: 0px;
}

li{
  height:20px;
  white-space:pre;
  padding:1px;
  margin: 1px;
  border: solid blue 1px;
}

#buttonholder{
  position: absolute;
}

JavaScript

var theMagicNumber = 1/64;

var MIN_HEIGHT = 50;
var HEIGHT_MAX = 500;
var currentHeight = 300;
var width = 300;



var scroller = document.getElementById("gottapaythescrolltoll");

scroller.style.height = currentHeight+"px"
scroller.style.width = width+"px"

var buttonholder = document.getElementById("buttonholder");
buttonholder.style.top = HEIGHT_MAX+10+"px";

function shorten(callback){
	if(currentHeight!=MIN_HEIGHT){
  	currentHeight-=MIN_HEIGHT;
    scroller.style.height = currentHeight+"px"
  }
  if(typeof callback === "function")
  {
  	setTimeout(callback,100)
  }
}

var magic = document.getElementById("magic");

function tallen(callback){
	if(currentHeight!=HEIGHT_MAX){
  	currentHeight+=MIN_HEIGHT;
    scroller.style.height = currentHeight+"px"
  }
  if(typeof callback === "function")
  {
  	setTimeout(callback,100)
  }
}

function tickle(amount,callback){
    amount = parseFloat(amount,10);
		amount = isNaN(amount) ? parseFloat(magic.value,10) : amount;

    scroller.style.width = width+amount+"px"
    setTimeout(function(){
    	scroller.style.width = width+"px"
      if(typeof callback === "function")
      {
      	setTimeout(callback,100)
      }
    },100)
}

document.getElementById("shorter").onclick = shorten;

document.getElementById("taller").onclick = tallen;

document.getElementById("widthtickler").onclick = tickle;

var min = 0;
var max = 1;

var solver = document.getElementById("solve");

solver.onclick = function(){
	solver.disabled=true;
	min= 0;
  max = 1;
	solve();
}

magic.value = theMagicNumber;


var chopCount=0;
var $lastItem = $(document.getElementById("lastitem"));
var test = 0;


function solve(){
	test = (min+max)/2;
  console.log(test);
  var accuracyLimit = (test===max)
  shorten(function shortenComplete(){
    var beforeTickle = $lastItem.offset().left;

    tickle( test, function tickleComplete() {
      var afterTickle = $lastItem.offset().left;
      if(beforeTickle!=afterTickle) // Too high
      {
       ...