Resizable split window

Split view with resize bar

by austinfrance

HTML

<div id="frame">
  <div id="a">
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  </div>
  <div id="b">
  </div>
  <div id="c">
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  <div>content</div>
  </div>
</div>

CSS

html { background-color: rgb(32, 38, 46); }
#a,#b,#c { z-index: 0; user-select: none; overflow: hidden; }
#frame { height: 300px; }
#a, #c { height: 145px; }
#b { height: 10px; }
#a { background-color: red; }
#b { background-color: grey; }
#c { background-color: blue; }

JavaScript

(function() {
  var a = document.getElementById('a');
  var b = document.getElementById('b');
  var c = document.getElementById('c');
  var f = document.getElementById('frame');
  var down = null;

	f.addEventListener('mousemove',drag);
	f.addEventListener('mousedown',drag);
	document.documentElement.addEventListener('mouseup',drag);
  document.documentElement.addEventListener('mouseleave', drag);

  function resizeBy(y) {
    if (c.offsetHeight - y >= 0 && a.offsetHeight + y >= 0) {
      a.style.height = (a.offsetHeight + y) + 'px';
      c.style.height = (c.offsetHeight - y) + 'px';
    } else {
      if (y > 0) {
        a.style.height = (a.offsetHeight + c.offsetHeight) + 'px';
        c.style.height = 0;
      } else {
        c.style.height = (a.offsetHeight + c.offsetHeight) + 'px';
        a.style.height = 0;
      }
    }
  }

  function drag(e) {
		switch(e.type) {
    case 'mousedown':
      if (e.target == b) {
        down = e;
      }
      break;
    case 'mouseup':
      if (down) {
        resizeBy(e.movementY);
        down = null;
      }
      break;
    case 'mousemove':
      if (down) {
        resizeBy(e.movementY);
      }
      break;
    case 'mouseleave':
    	if (down && e.target == document.documentElement) {
        resizeBy(e.movementY);
      	down = false;
      }
    }
  }
})();