jQuery Splitter is plugin that split your content with movable splitter between them
JavaScript HTML CSS
Latest commit 296d12d Nov 30, 2016 @jcubic Update readme
Permalink
Failed to load latest commit information.
css Fix height of the splitter - fix #56 Jul 9, 2016
js Update version Nov 12, 2016
.gitignore npm and bower update Feb 21, 2016
.npmignore npm and bower update Feb 21, 2016
LICENSE Create LICENSE Feb 21, 2016
README.md Update readme Nov 30, 2016
bower.json update bower.json Nov 12, 2016
demo.html Update demo - fix #49 Mar 17, 2016
package.json Update version Nov 12, 2016
splitter.jquery.json Update version Nov 12, 2016

README.md

jQuery Splitter

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 how many pixels where you can't move the splitter on 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

Demo

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

Patch Contributors

License

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

Released under the terms of the GNU Lesser General Public License