Search code examples
javascriptjquerycssjquery-uisplitter

How to make a left and right panel, and be able to slide a divider between them?

I have a page that has a left div and a right div. The divs are organized using display:table and associated tags. The right div is resizable using jquery-ui's resizable facility. I would like to be able to drag the divider to the left and right, and change the relative size of the panes.

But it's not quite right. For one thing, the right pane can only be resized by its right edge and by the bottom right corner, not by the left edge. How does one really make a splitter in this js/html/css world?

http://jsfiddle.net/rhedin/xhaxme4c/

<!DOCTYPE html>
<html lang="en" style="height:100%;width:100%;border:3px solid red">
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
        <style>
            * {
                box-sizing: border-box
            }
        </style>
    </head>
    <body style="height:100%;width:100%;border:3px solid blue;margin:0;padding:8px">
        <div id="allBodyDiv" style="width:100%;height:100%;border:3px solid black;display:table">
            <div id="leftWithinBodyDiv" style="border:3px solid blue;display:table-cell">
            </div>
            <div id="rightWithinBodyDiv" style="width:100px;border:3px solid red;display:table-cell">
            </div>
        </div>
        <script>
            $(function() {
                $("#rightWithinBodyDiv").resizable({});
            });
        </script>
    </body>
</html>
Solution

  • Add the resizeable function to the left one as well. Check my fiddle to see if that's what you meant.

    http://jsfiddle.net/xhaxme4c/4/

    A better way to do it is to hook the resize function.

    http://jsfiddle.net/dorzb3kn/

    $(function () 
{
    $(".leftcolumn").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var greenboxspace = parent.width() - ui.element.outerWidth(),
                redbox = ui.element.next(),
                redboxwidth = (greenboxspace - (redbox.outerWidth() - redbox.width()))/parent.width()*100+"%";
                redbox.width(redboxwidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});