resize the left div box when resize the box

Question

I have found resize box event on this page https://doc.nuxeo.com/display/MAIN/Nuxeo+Documentation+Center+Home when i was referring the net.

I coded as per the code design whatever they coded on the above page. However, it seems something running behind it even i followed all the codes.

AIM: I want have the same effect on my code as well. see the pictures, the left dark blue panel will be resizable when drag the button left and right. This is what i am expecting..

#splitter {
    min-height: 300px;
    min-width: 600px;
}
.vsplitbar {
    background: #ccc url("/s/en_GB-1988229788/4394/a32f094df7825f58c6a417309475c6c954804a27.101/5.2.3/_/download/resources/com.atlassian.confluence.plugins.doctheme:css-resources/vgrabber.gif") no-repeat scroll center center;
    display: block;
    width: 5px;
}
#splitter #splitter-content, #splitter #splitter-sidebar {
    overflow: auto;
}
div#splitter-sidebar {
    background: #fff none repeat scroll 0 0;
}
#splitter-sidebar {
    background-image: url("/s/en_GB-1988229788/4394/a32f094df7825f58c6a417309475c6c954804a27.101/5.2.3/_/download/resources/com.atlassian.confluence.plugins.doctheme:css-resources/sidebar-shadow.png");
    background-position: right top;
    background-repeat: repeat-y;
    display: block;
}
#splitter #splitter-content, #splitter #splitter-sidebar {
    overflow: auto;
}
#splitter #splitter-content {
    background-color: #010101;
}
a, a:link, a:visited {
    transition: color 0.1s ease 0s;
}

<div class="topNavnar">
    <div id="fw-logo" class="company-logo">
        <div></div>
    </div>
    <div id="IconNav" class="iconsNav">
        <ul class="Icon_Nav nav nav-pills">
            <li><span class="glyphicon glyphicon-calendar"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-picture"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span><span class="caret"></span>

                </a>
                <ul class="dropdown-menu">
                    <li>list1</li>
                    <li>list2</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="IconCreate" class="iconsCreate">
        <ul class="Icon_Nav_create nav nav-pills">
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-search"></span>
            </li>
            <li class="hasButton">
                <button type="button" class="btn btn-default">CREATE +</button>
            </li>
            <li><span class="glyphicon glyphicon-cog"></span>
            </li>
        </ul>
    </div>
</div>
<!-- vertical Navbar -->
<div id="splitter" style="position: relative; border: 2px solid red; height: 482px;">
    <div id="splitter-sidebar" style="position: absolute; left: 0px; height: 482px; width: 435px;">
        <div class="VertopNavnar">
            <div class="List_head">ITEMS</div>
            <ul class="Ver_Icon_Nav_create">
                <li><span class="glyphicon glyphicon-stop"></span> Recent Assets</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
            </ul>
            <div class="List_head">TAGS</div>
            <div class="List_head"><span class="Folder_count">16</span> FOLDERS</div>
            <ul class="Ver_Icon_Nav_create">
                <li><span class="glyphicon glyphicon-stop"></span> something</li>
                <li><span class="glyphicon glyphicon-search"></span> 2015
                    <ul class="Ver_Nav_Sublist">
                        <li><span class="glyphicon glyphicon-stop"></span> something</li>
                        <li><span class="glyphicon glyphicon-stop"></span> something</li>
                        <li><span class="glyphicon glyphicon-stop"></span> items</li>
                    </ul>
                </li>
                <li><span class="glyphicon glyphicon-cog"></span> Brand items</li>
                <li><span class="glyphicon glyphicon-cog"></span> something</li>
            </ul>
        </div>
    </div>
    <div class="vsplitbar" style="z-index: 4; position: absolute; -moz-user-select: none; cursor: ew-resize; left: 357px; height: 482px; background-color: red;" unselectable="on"><a href="javascript:void(0)" accesskey="L" tabindex="0" title="vsplitbar"></a>
    </div>
    <div id="splitter-content" style="position: absolute; left: 440px; width: 1160px; height: 482px;">
        <div ng-view></div>
    </div>
</div>

But, on the left of the box[left panel], the resize button is appearing, but, it is not re-sizing when resize, Any help how i can achieve this?

Answer 1

Following can be your answer.

<div class="panel" id="ui-Resizable" onselectstart="return false;" >
    <div class="title" >Resizable Panel</div>

</div>
<style>
  body{margin:0px;padding:50px;font-size:14px;color:#333}

    .panel{width:400px;height:240px;border:1px solid #ccc;position:relative;min-width:40px;min-height:24px;}
    .panel .title{background:#eee;text-align:center;line-height:30px;border:1px solid #fff;font-weight:bold}

    .ui-Resizable-r{position:absolute;right:0px;top:0px;width:10px;height:100%;cursor: e-resize;}
    .ui-Resizable-b{position:absolute;right:0px;bottom:0px;width:100%;height:10px;cursor: s-resize;}
    .ui-Resizable-rb{position:absolute;right:0px;bottom:0px;width:20px;height:20px;cursor: nw-resize;}

</style>

<script>
    var m_panel , m_ctrl , m_type ;

    var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0  ;

        var m_min_w = 100,m_min_h = 40;

        function on_mousedown( e , panel ,ctrl , type ){
        var e = e || window.event;

                m_start_x =  e.pageX - ctrl.offsetLeft;
        m_start_y =  e.pageY - ctrl.offsetTop;

        m_panel = panel;
        m_ctrl  = ctrl;
        m_type  = type;

        moving = setInterval(on_move,10);

    }
    document.onmousemove = function( e ){
        var e = window.event || e;
        m_to_x = e.pageX;
        m_to_y = e.pageY;
    }
    function on_move(){

        if(moving){

            var min_left = m_panel.offsetLeft
            var min_top  = m_panel.offsetTop 

            var to_x = Math.max(min_left+ m_min_w,m_to_x - m_start_x) ;
            var to_y = Math.max(min_top + m_min_h,m_to_y - m_start_y) ;

                            var grid = 50;

            var grid_w = to_x + ( m_type == 'rb' ? 20:10 ) ;
                grid_w = grid_w-grid_w%grid;

            var grid_h = to_y + ( m_type == 'rb' ? 20:10 ) ;
                grid_h = grid_h-grid_w%grid;


            switch(  m_type ){
                case 'r' :
                    m_ctrl.style.left =  to_x + "px";
                    m_panel.style.width=grid_w+'px';
                break;
                case 'b' :
                    m_ctrl.style.top  = to_y+ "px";
                    m_panel.style.height=grid_h+'px';
                break;
                case 'rb' :
                    m_ctrl.style.left =to_x + "px";
                    m_ctrl.style.top  =to_y+ "px";

                    m_panel.style.width=grid_w+'px';
                    m_panel.style.height=grid_h+'px';
                break;
            }
        }

    }

        document.onkeyup = document.onmouseup = function(e){
        clearInterval(moving);
        var cls = document.getElementsByClassName('ui-Resizable-ctrl');
        for(var i=0;i<cls.length;i++){
            cls[i].style.left = '';
            cls[i].style.top = '';
        }
    }

        function Resizable( panelId ){

        var panel = document.getElementById(panelId);
                var r = document.createElement("div");
        var b = document.createElement("div");
        var rb = document.createElement("div");

        r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
        b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
        rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';

        panel.appendChild(r);
        panel.appendChild(b);
        panel.appendChild(rb);

                r.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,r,'r');
        })
        b.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,b,'b');
        })
        rb.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,rb,'rb');
        })
    }
    Resizable('ui-Resizable');
</script>

Answer 2

There is a jqueryUI function that is dedicated to resize an element: http://jqueryui.com/resizable/

Edit

I stumble on a question and one answer have a demo that I think you are looking for.

The three event function to do this is:

$('.handle').on('mousedown', function(e){
    isDragging = true;
    sPos = e.pageX;
    handle = $(this);
    tWidth = handle.prev().width() + handle.next().width();
});

$(window).on('mouseup', function(e){
    isDragging = false;
});

$('.container').on('mousemove', function(e){
    var cPos = sPos - e.pageX;
    if(isDragging && ((tWidth - handle.next().width()) - cPos) <= tWidth){
        handle.prev().width((tWidth - handle.next().width()) - cPos);
        handle.next().width(tWidth - handle.prev().width());
        sPos = e.pageX;
    }
});

Here is the jsfiddle demo

And here is the answer I'm referring: https://stackoverflow.com/a/32658723/1071742

Answer 3

your question is not clear to me. If you want to resize a box after clicking on resize button, please go through the answer:

$(function(){

// Bind the resize event. When any test element's size changes, update its
// corresponding info div.

$('.test').resize(function(){

var elem = $(this);
// Update the info div width and height - replace this with your own code

// to do something useful!

elem.closest('.container').find('.info')

.text( this.tagName + ' width: ' + elem.width() + ', height: ' + elem.height() );
11.
});

// Update all info divs immediately.

$('.test').resize();
// Add text after inline "add text" links.

$('.add_text').click(function(e){

e.preventDefault();

$(this).parent().append( ' Adding some more text, to grow the parent container!' );

});
// Resize manually when the link is clicked, but only for the first paragraph.

$('.add_text:first').click(function(){

$(this).parent().resize();

});

});