Have you ever taken a risk at doing some movement utilizing plain Javascript or moving DIVs here and there or resizing them?! All things considered, you know then the amount of torment it is as not just you need to handle the troublesome piece of liveliness additionally making it cross program good.
Well you most likely know why I am extending up so hard is just to let you know that it is so natural to utilize jQuery and do some truly incredible things without irritating of knowing how it is done inside. jQuery accompanies truly valuable UI library that can be consolidated to do such traps.
In this little note, I will demonstrate to you generally accepted methods to do Resizing a DIV utilizing jQuery. I will demonstrate to you the demo of a DIV, which can be resized by pulling up the dragbar .There are two div and between the two div there is a dragbar with the help of the dragbar you can pull the div according to your need.
Step 1: Including the jQuery
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
Step 2: Write Html to Resize the Div with mouse drag
<!DOCTYPE html>
<html>
<head>
<title>
resize div
</title>
</head>
<body>
/*This is the main div under which main div and sidebar div reside*/
<div class="wrap">
<div id="sidebar"> /*this is the first div*/
<span id="position"></span> /*setting the position of the div*/
This is the sidebar div
</div>
<div id="dragbar"></div> /*this is the div with the help of which we can resize the div accordingly*/
<div id="main"> /*this is the second div*/
This is the main div
</div>
</div>
<div id="console"></div>
</body>
</html>
Step 3: Writing the Css to set the div accordingly
body,html{width:100%;height:100%;padding:0;margin:0;}
.clearfix:after {
content: '';
display: table;
clear: both;
}
/* first div*/
#main{
background-color: #BD6982;
height: 75%;
}
/*second div*/
#sidebar{
background-color: #85BD40;
height:25%;
overflow-y: hidden;
}
/* div which is used to drag for resizing */
#dragbar{
background-color:#7BF0FB;
width :100%;
height : 3px;
cursor: col-resize;
}
/* bar which show how much you want to resize */
#ghostbar{
height:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
.wrap{height: 600px;}
Step 4: Writing jQuery Code
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
width: main.outerWidth(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("top",e.pageY+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
var percentage = (e.pageY / window.innerHeight) * 100;
var mainPercentage = 100-percentage;
$('#console').text("side:" + percentage + " main:" + mainPercentage);
$('#sidebar').css("height",percentage + "%");
$('#main').css("height",mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
0 Comment(s)