JQuery UI resizable example

by Christian Juth

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>

CSS

#resizable-wrap{
  width: 100px; 
  height: 100px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

#resizable {
  position: absolute;
  top: 0;
  left: 25px;

  width: 50px; 
  height: 120px;  

  background-color: #F3EF7D;
}

JavaScript

var gridY = 20;

$("#resizable").resizable({
  handles: 'n',
  grid: [0, gridY],
  minHeight: gridY,
  maxHeight: 120,
  resize: function(e, ui){
  	var height = ui.size.height - gridY;
  	$("p").text(`${height}%`);
  }
});