SplitterJS: Vertical Splitter Demo

by Nick Karnik

HTML

<script src="http://requirejs.org/docs/release/2.1.10/minified/require.js"></script>
<script src="https://dl.dropboxusercontent.com/u/28584686/splitterjs/Splitter.js"></script>
<div id=leftDiv class="unselectable">Left</div>
<div id=rightDiv class="unselectable">Right</div>
<div id=splitterDiv class="verticalSplitter"></div>

CSS

html, body {
    margin: 0;
    height: 100%;
    padding: 0;
    background-color: gray;
    bottom: 0;
}

#leftDiv {
    right: 50%;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: lightblue;
    position: absolute;
}

#rightDiv {
    top: 0;
    right: 0;
    left: 50%;
    background-color: lightgray;
    position: absolute;
    bottom: 0;
}

.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.verticalSplitter {
    width: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}

JavaScript

require(['Splitter'], function (Splitter) {
		new Splitter({
            elementOne: leftDiv,       // Div to the left of the splitter
            elementTwo: rightDiv,      // Div to the right of the splitter
            splitter: splitterDiv,     // Splitter div
            orientation: 'vertical',   // Orientation [vertical | horizontal]
            collapse: 'left',          // Collapse Direction [left | right | top | bottom]
            placeholderSplitter: true // Use a placeholder splitter
        }).Render();
    });