How can I resize a DIV by dragging just ONE side of it?

Question

Let me be more specific... I don't want the DIV to resize WHILE I'm dragging. I want to drag it out (and maybe a vertical line follows my cursor) and when I release, it resizes the div.

Answer 1

Have a look at this example

Html

<div id="sidebar">      <span id="position"></span>     <div id="dragbar"></div>     sidebar </div> <div id="main">     main </div> 

jquery

var dragging = false; $('#dragbar').mousedown(function(e){    e.preventDefault();     dragging = true;    var main = $('#main');    var ghostbar = $('<div>',                     {id:'ghostbar',                      css: {                             height: main.outerHeight(),                             top: main.offset().top,                             left: main.offset().left                            }                     }).appendTo('body');      $(document).mousemove(function(e){       ghostbar.css("left",e.pageX+2);    }); });  $(document).mouseup(function(e){    if (dragging)     {        $('#sidebar').css("width",e.pageX+2);        $('#main').css("left",e.pageX+2);        $('#ghostbar').remove();        $(document).unbind('mousemove');        dragging = false;    }  }); 

Demo at http://jsfiddle.net/gaby/Bek9L/1779/

it is an alteration from the code i posted in Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

Answer 2

Been looking to do this, very nice solution by Gaby. Although my requirement was not to have any absolute elements and use percentages instead of pixels, so I've changed Gaby's code a little to cater for this (if anyone is interested)

CSS

#main{   background-color: BurlyWood;   float: right;   height:200px;   width: 75%; } #sidebar{   background-color: IndianRed;   width:25%;   float: left;   height:200px;   overflow-y: hidden; } #dragbar{   background-color:black;   height:100%;   float: right;   width: 3px;   cursor: col-resize; } #ghostbar{   width:3px;   background-color:#000;   opacity:0.5;   position:absolute;   cursor: col-resize;   z-index:999 } 

JS

var i = 0; var dragging = false; $('#dragbar').mousedown(function(e){    e.preventDefault();     dragging = true;    var main = $('#main');    var ghostbar = $('<div>',                     {id:'ghostbar',                      css: {                             height: main.outerHeight(),                             top: main.offset().top,                             left: main.offset().left                            }                     }).appendTo('body');      $(document).mousemove(function(e){       ghostbar.css("left",e.pageX+2);    });  });  $(document).mouseup(function(e){    if (dragging)     {        var percentage = (e.pageX / window.innerWidth) * 100;        var mainPercentage = 100-percentage;         $('#console').text("side:" + percentage + " main:" + mainPercentage);         $('#sidebar').css("width",percentage + "%");        $('#main').css("width",mainPercentage + "%");        $('#ghostbar').remove();        $(document).unbind('mousemove');        dragging = false;    } }); 

Demo: http://jsfiddle.net/Bek9L/3020/