craftoid/index.html

## index.html

<!DOCTYPE html>

<!--

resizable div // simulating a resizable window // bitcraftlab 2017

-->

<html>

<head>

  <meta charset="utf-8">

  <style>

  body {
    font-family: sans-serif;
    margin: 0;
  }

  #page {
    background-color: #ccf;
    position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
  }

  #resizer1, #resizer2  {
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    height:100%;
    line-height: 100vh;
    cursor:ew-resize;
  }

  #resizer1 {
    left: 0;
  }

  #resizer2 {
    right: 0;
  }

  .block {
    background-color: #aac;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
    vertical-align: middle;
    line-height:200px;
    height: 200px;
    width: 200px;
    font-size: 20px;
    color: #fff;
  }

  #grid {
    display: grid;
    float: left;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-content: space-between;
    justify-content: space-around;
    overflow: hidden;
  }


  </style>

  <script>

  function init() {

    // get resizers and attach eventlisteners to them
    document.getElementById('resizer1').addEventListener('mousedown', initResize, false);
    document.getElementById('resizer2').addEventListener('mousedown', initResize, false);

    // call this whenever we resize the window
    window.onresize = resizeWindow //addEventListener('resize', resizeWindow, true);

  }

  function initResize(e) {

    // new event listeners for dragging the mouse
    window.addEventListener('mousemove', resize, false);
    window.addEventListener('mouseup', stopResize, false);

    // new cursor style
    document.body.style.cursor = 'ew-resize';

  }

  function resize(e) {

    // get elements
    var page = document.getElementById('page');
    var resizer = document.getElementById('resizer1');

    // get width of the resizer and the window
    var dmin = resizer.offsetWidth;
    var dmax = window.innerWidth;

    // distance from the center of the window
    var w = Math.abs(window.innerWidth / 2 - e.clientX ) * 2;

    // center on the middle of the resizer
    w = w + dmin ;

    // make sure the new width is not wider than the window ...
    w = Math.min(w, dmax);

    // ... and at least as wide as the resizer
    w = Math.max(w, dmin);

    page.style.width =  w + 'px';

  }

  function stopResize(e) {

    // remove event listeners
    window.removeEventListener('mousemove', resize, false);
    window.removeEventListener('mouseup', stopResize, false);

    // reset cursor style
    document.body.style.cursor = 'default';

  }

  function resizeWindow(e) {
    // reset the width of the virtual page to the width of the window
    var page = document.getElementById('page');
    page.style.width = window.innerWidth + 'px';
  };

  </script>

</head>

<body onload = "init()">
  <div id="page">
    <div id="resizer1" >⇆</div>
    <div id="grid">
      <div class="block">block 1</div>
      <div class="block">block 2</div>
      <div class="block">block 3</div>
      <div class="block">block 4</div>
      <div class="block">block 5</div>
      <div class="block">block 6</div>
      <div class="block">block 7</div>
      <div class="block">block 8</div>
      <div class="block">block 9</div>
    </div>
    <div id="resizer2" >⇆</div>
  </div>
</body>

</html>

	<!DOCTYPE html>

	<!--

	resizable div // simulating a resizable window // bitcraftlab 2017

	-->

	<html>

	<head>

	<meta charset="utf-8">

	<style>

	body {
	font-family: sans-serif;
	margin: 0;
	}

	#page {
	background-color: #ccf;
	position: fixed;
	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
	user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	}

	#resizer1, #resizer2 {
	background-color: rgba(255, 255, 255, 0.5);
	position: absolute;
	height:100%;
	line-height: 100vh;
	cursor:ew-resize;
	}

	#resizer1 {
	left: 0;
	}

	#resizer2 {
	right: 0;
	}

	.block {
	background-color: #aac;
	border: 1px solid rgba(0, 0, 0, 0.2);
	text-align: center;
	vertical-align: middle;
	line-height:200px;
	height: 200px;
	width: 200px;
	font-size: 20px;
	color: #fff;
	}

	#grid {
	display: grid;
	float: left;
	width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-content: space-between;
	justify-content: space-around;
	overflow: hidden;
	}


	</style>

	<script>

	function init() {

	// get resizers and attach eventlisteners to them
	document.getElementById('resizer1').addEventListener('mousedown', initResize, false);
	document.getElementById('resizer2').addEventListener('mousedown', initResize, false);

	// call this whenever we resize the window
	window.onresize = resizeWindow //addEventListener('resize', resizeWindow, true);

	}

	function initResize(e) {

	// new event listeners for dragging the mouse
	window.addEventListener('mousemove', resize, false);
	window.addEventListener('mouseup', stopResize, false);

	// new cursor style
	document.body.style.cursor = 'ew-resize';

	}

	function resize(e) {

	// get elements
	var page = document.getElementById('page');
	var resizer = document.getElementById('resizer1');

	// get width of the resizer and the window
	var dmin = resizer.offsetWidth;
	var dmax = window.innerWidth;

	// distance from the center of the window
	var w = Math.abs(window.innerWidth / 2 - e.clientX ) * 2;

	// center on the middle of the resizer
	w = w + dmin ;

	// make sure the new width is not wider than the window ...
	w = Math.min(w, dmax);

	// ... and at least as wide as the resizer
	w = Math.max(w, dmin);

	page.style.width = w + 'px';

	}

	function stopResize(e) {

	// remove event listeners
	window.removeEventListener('mousemove', resize, false);
	window.removeEventListener('mouseup', stopResize, false);

	// reset cursor style
	document.body.style.cursor = 'default';

	}

	function resizeWindow(e) {
	// reset the width of the virtual page to the width of the window
	var page = document.getElementById('page');
	page.style.width = window.innerWidth + 'px';
	};

	</script>

	</head>

	<body onload = "init()">
	<div id="page">
	<div id="resizer1" >⇆</div>
	<div id="grid">
	<div class="block">block 1</div>
	<div class="block">block 2</div>
	<div class="block">block 3</div>
	<div class="block">block 4</div>
	<div class="block">block 5</div>
	<div class="block">block 6</div>
	<div class="block">block 7</div>
	<div class="block">block 8</div>
	<div class="block">block 9</div>
	</div>
	<div id="resizer2" >⇆</div>
	</div>
	</body>

	</html>