Sidebar Resizer

by Mayank Dixit

HTML

<p></p>

CSS

p.resizable {
  background: cyan;
  position: relative;
  height: 200px;
  width: 300px;
}

p .resizer {
  width: 2px;
  height: 100%;
  background: rgba(0,0,0,.3);
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: col-resize;
  transition: .1s;
}

p .resizer:hover {
  width: 5px;
  background: black;
}

JavaScript

var p = document.querySelector('p');
setTimeout(function() {
	var p = document.querySelector('p');
  p.className = p.className + ' resizable';
  var resizer = document.createElement('div');
  resizer.className = 'resizer';
  p.appendChild(resizer);
  resizer.addEventListener('mousedown', initDrag, false);
}, 1000);

var startX, startY, startWidth, startHeight;
var minWidth = 100;
var maxWidth = 500;

function initDrag(e) {
  startX = e.clientX;
  startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
  document.documentElement.addEventListener('mousemove', doDrag, false);
  document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
  var resultWidth = startWidth + e.clientX - startX;
  if (resultWidth > minWidth && resultWidth < maxWidth) {
    p.style.width = (startWidth + e.clientX - startX) + 'px';
  }
}

function stopDrag(e) {
  document.documentElement.removeEventListener('mousemove', doDrag, false);
  document.documentElement.removeEventListener('mouseup', stopDrag, false);
}