jQuery Splitter is plugin that split your content with movable splitter between them
JavaScript HTML CSS
Clone or download

README.md

jQuery Splitter

npm bower

jQuery Splitter is plugin that split your content with movable splitter between them.

Example

var splitter = $('#foo').height(200).split({
    orientation: 'vertical',
    limit: 10,
    position: '50%', // if there is no percentage it interpret it as pixels
    onDrag: function(event) {
        console.log(splitter.position());
    }
});
<div id="foo">
    <div id="leftPane">Foo</div>
    <div id="rightPane">Bar</div>
</div>

Note: You need to set the height of the container for splitter to work.

Options

  • orientation - string 'horizontal' or 'vertical'.
  • limit - number or object {leftUpper: number, rightBottom: number} that indicate how many pixels where you can't move the splitter to the edge.
  • position - number or string with % indicate initial position of the splitter.
  • onDrag - event fired when draging the splitter, the event object is from mousemove
  • percent - boolean that indicate if spliter should use % instead of px (for use in print)

Demo

http://jquery.jcubic.pl/splitter.php

Patch Contributors

License

Copyright (C) 2010-2018 Jakub Jankiewicz <http://jcubic.pl/me>

Released under the terms of the GNU Lesser General Public License