create a handle to resize a div

by Costa Tsaousis

HTML

<div id="resizeMe" class="resizable">
  <p>Content content content content</p>
  <p>Content content content content</p>
  <p>Content content content content</p>
  <p>Content content content content</p>
  <div class="resize-handle">handler</div>
</div>

CSS

.resizable {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid #000;
}

.resize-handle {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 10px;
  width: 50px;
  background-color: grey;
  cursor: ns-resize;
  color: white;
  text-align: center;
  font-size: 9px;
  overflow: hidden;
}

JavaScript

function resizableStart(e) {
  this.originalX = e.clientX;
  this.originalY = e.clientY;
  this.lastW = this.originalW = this.resizable.clientWidth;
  this.lastH = this.originalH = this.resizable.clientHeight;
  this.onmousemove = this.onmouseout = resizableMove;
  this.onmouseup = resizableEnd;
  var self = this;
  document.onmouseup = function(e) {
    resizableEnd.call(self, e);
  };
  document.onmousemove = function(e) {
    resizableMove.call(self, e);
  };
}

function resizableMove(e) {
  var newW = this.originalW + e.clientX - this.originalX,
    newH = this.originalH + e.clientY - this.originalY;

  if (newW !== this.lastW) {
    this.resizable.style.width = newW + 'px';
  }
  if (newH !== this.lastH) {
    this.resizable.style.height = newH + 'px';
  }

  this.lastW = newW;
  this.lastH = newH;
  e.preventDefault();
}

function resizableEnd() {
  document.onmouseup =
    document.onmousemove =
    this.onmousemove =
    this.onmouseout =
    this.onmouseup = null;

}

var els = document.getElementsByClassName('resize-handle');
for (var i = 0, len = els.length; i < len; ++i) {
  els[i].resizable = document.getElementById('resizeMe');
  els[i].onmousedown = resizableStart;
}