Home / Frontend Codes and Demos / JavaScript / Resize div box vertically using jquery draggable
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.

Resize div box vertically using jquery draggable

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

About CV

I'm frontend developer

Check Also

Develop html table using css div tags

Develop html table using css div tags

This tutorial will explain how to form HTML table using css div tags without using table tags. This tutorial supports fixed header on scrolling table body and support responsive table.