Resize div box vertically using jquery draggable

Resize div box horizontally 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

Advertisement