Home / Frontend Codes and Demos / JavaScript / Resize div box horizontally using jquery draggable
Resize div box vertically using jquery draggable

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

Resize div box horizontally using jquery draggable

Resize div box vertically using jquery draggable

This article will explain how to write the code to dynamically resize the two horizontal divs on dragging the center bar between two div’s to make the div’s height 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 horizontal div’s height automatically when dragging the divider using jquery ui draggable.

Include the dependancy

Below js files will be 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="draggableH"></div> 		 	<div id="main-left" class="main-top"> 		 		<div class="left-inner-content"> 		 			<div class="left-inner-main"> 		 				<h2>Top</h2> 		 			</div> 		 		</div> 		 	</div> 		 	<div id="main-right" class="main-bottom"> 		 		<div class="right-inner-content"> 		 			<div class="right-inner-main"> 		 				<h2>Bottom</h2> 		 			</div> 		 		</div> 		 	</div> 	 	</div> 	 </div> 

Include the below css code

 body,html{ 	height: 100%; 	font-size: 12px; 	margin: 0; 	padding: 0; } * {     -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: 110px; } .header ul{ 	overflow: hidden; 	margin-left: 10px; 	padding: 8px 0; } .header li{ 	list-style: none; 	display: inline; 	float: left; } .header li.stackH,.header li.stackV{ 	background: url("../img/layout_change_icon.png"); 	width: 24px;     height: 24px;     cursor: pointer; } .header li.stackV{ 	margin-left: 5px; } .header li.stackH {     background-position: -25px 0px; } .mainContent{     overflow: hidden;     background: #efefef; } .left-inner-content,.right-inner-content{     padding-left: 10px;     padding-right: 10px; } .left-inner-main,.right-inner-main{ 	background: #FFF; 	overflow: auto; } .left-inner-main div,.right-inner-main div{ 	height: initial; } #mainContentHolder{ 	position: relative; } .main-top,.main-bottom{ 	overflow: auto; 	height: 370px; 	background: #fff;     margin-left: 10px;     margin-right: 10px; } .main-bottom{ 	margin-top: 10px; } #draggableH{ 	position: absolute;     z-index: 3;     width: 10px;     cursor: row-resize;     background: transparent;     height: 10px;     width: 100%;     background: #efefef; } 

Please the below resizable javascript function in your html file

 $( document ).ready(function() {     		// Initial call 		    resizeWindow();  		    $( window ).resize(function() { 		  		resizeWindow() 			});  			function calculatepercent(position) { 				var a = position;  				$('div.main-top').height(position); 				$('div.main-bottom').height($("#mainContent").height() - (position + 20)); 			};  			$( "#draggableH" ).draggable({  				axis: "y", 				start: function(a) { 					calculatepercent(a.target.offsetTop); 				}, 				drag: function(b) { 					calculatepercent(b.target.offsetTop); 				}, 				stop: function(c) { 					calculatepercent(c.target.offsetTop); 				} 			});  			function resizeWindow(){ 				$("#mainContent").height($("body").height() - $(".header").height());  				var height = (($("body").height() - $(".header").height())/2)-10;  		    	$("#draggableH").css({ 				   'top'	: height 				});  		    	$(".main-top").css({ 				   'height'	: height 				});  		    	$(".main-bottom").css({ 				   'height'	: height 				}); 			}; 		}); 

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.