horizontal bar drag between stacked divs using jquery

Question

So I have two divs above and below each other. The one on top is the content area and the one below is a notes section about the content. I'd like to put an invisible bar in between the two divs where I can drag the height of the two divs. If possible I'd also like to snap to the top or bottom.

I'll attach an example of the current look but the design can change as long as the classes stay the same in the html. Any help appreciated. Thanks!

jsfiddle.net/jv4edcc4/

Answer 1

try this - code is simple, you can check how it works here - http://jsfiddle.net/Bek9L/3142/

HTML:

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

CSS:

body,html{width:100%;height:100%;padding:0;margin:0;}
.clearfix {
    height: 100%;
}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
#main{
   background-color: BurlyWood;
   height: 50%;
    width: 100%;
}
#sidebar{
   background-color: IndianRed;
   width:100%;
   height:50%;
   overflow-y: hidden;
   position: relative;
}

#dragbar{
   background-color:black;
   height:10px;
   width: 100%;
   cursor: row-resize;
    position: absolute;
    bottom: 0px;
}
#ghostbar{
    width: 100%;
    height:5px;
    background-color:#000;
    opacity:0.5;
    position:absolute;
    cursor: col-resize;
    z-index:999
}

and JS (uses jQuery):

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;
       }
    });