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 dependency

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

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

  1. Marvinexece Avatar

    Your comment is awaiting moderation.

    При выборе семейного медика стоит обратить внимание на квалификацию, стиль общения и удобные часы приема.
    Убедитесь, что медицинский центр удобна в доезде и сотрудничает с узкими специалистами.
    Узнайте , работает ли доктор с вашей полисом, и есть ли возможность записи онлайн .
    http://www.comrades-horde.ru/forums/viewtopic.php?f=18&t=467343
    Обращайте внимание отзывы пациентов , чтобы понять уровень доверия .
    Не забудьте наличие профильного образования, аккредитацию клиники для уверенности в качестве лечения.
    Выбирайте — тот, где примут во внимание ваши особенности здоровья, а общение с персоналом будет максимально прозрачным.

Leave a Reply

Your email address will not be published. Required fields are marked *