Resize div box vertically using jquery draggable

This article will explain how to write the code to dynamically resize the two vertical divs on dragging the center bar between two div’s to make the div’s width arranged by itself. To achieving this dynamic resizing functionality we used JQuery UI draggable to adjust the div’s size.

Let’s start the tutorial, about how to change the two vertical div’s width automatically when dragging the divider using jquery ui draggable.

Include the dependancy

Below js files will be find in the download folder.

<script src="js/1.12.4/jquery.min.js"></script>
<script src="js/1.12.4/jquery-ui.js"></script>

Please the below html code where you want to see the demo.

<div id="mainContent" class="mainContent">
	 <div id="mainContentHolder">
	 	<div id="draggable"></div>
	 	<div class="main-left">
	 		<div class="left-inner-content">
	 			<div class="left-inner-main">
	 				<h2 style="text-align:right;">Left Side</h2>
	 			</div>
	 		</div>
	 	</div>
	 	<div class="main-right">
	 		<div class="right-inner-content">
	 			<div class="right-inner-main">
	 				<h2>Right Side</h2>
	 			</div>
	 		</div>
	 	</div>
 	</div>
 </div>

Include the below css code

body,html{
	height: 100%;
	font-size: 12px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul{
	margin: 0;
	padding: 0;
}
.header{
	overflow: hidden;
	min-width: 380px;
	width: 100%;
	background: #efefef;
	padding: 10px 0;
    height: 90px;
}
.mainContent{
    overflow: hidden;
    background: #efefef;
}
.main-left,.main-right{
	float: left;
	width: 50%;
	overflow: auto;
}
.left-inner-content{
    padding-left: 10px;
    padding-right: 5px;
}
.right-inner-content{
    padding-left: 5px;
    padding-right: 10px;
}
.left-inner-content,.right-inner-content{
}
.left-inner-main,.right-inner-main{
	background: #FFF;
	overflow: auto;
	padding: 0 10px;
}
.left-inner-main div,.right-inner-main div{
	height: initial;
}
#mainContentHolder{
	position: relative;
}
#draggable{
	position: absolute;
    z-index: 3;
    width: 10px;
    cursor: col-resize;
    background: transparent;
}

Please the below resizable javascript function in your html file

$( document ).ready(function() {
	var lastPosition = null;
    resizeWindow();
    $( window ).resize(function() {
  		resizeWindow()
	});

	function calculatepercent(position) {
		var a = position;
		var b = $("body").width();
		var c = $("body").width() - position;

		$('div.main-left').width((returnPerCalc(a,b) + .4) + '%');
		$('div.main-right').width((returnPerCalc(c,b) - .5) + '%');
	};

	function returnPerCalc(a,b){
		var c = a/b;
		var d = c*100;
		return d;
	};

	$( "#draggable" ).draggable({ 
		axis: "x",
		start: function(a) {
			calculatepercent(a.target.offsetLeft);
		},
		drag: function(b) {
			calculatepercent(b.target.offsetLeft);
		},
		stop: function(c) {
			calculatepercent(c.target.offsetLeft);
			lastPosition = c.target.offsetLeft;
		}
	});

	function resizeWindow(){
		$("#mainContent").height($("body").height() - $(".header").height());
    	$("#mainContentHolder,.left-inner-main,.right-inner-main,#draggable").height($("body").height() - ($(".header").height() + 10));

    	// Convert the width from px to %
    	var percent = $("div.main-left").width() / $("body").width() * 100;

    	// Get the left postion of drag bar div incase window resized
    	var position = (lastPosition != null)?((percent * $("body").width())/100):(($("body").width()/2));

    	$("#draggable").css({
		   'left'	: position-5
		});
	};
});

Download Demo