jQuery splitter – split container

This is my latest jquery plugin — “splitter” which splits content vertically or horizontally with movable element between them, that allow to change the proportion of two element. You can get it from github. The demo is here.


, ,

  1. #1 by Martin Makundi on March 30, 2011 - 13:46


    How can I initialize the split to say all-way-bottom or all-way-top or 30% from top etc. in horizontal mode?


    • #2 by Martin Makundi on March 30, 2011 - 13:48

      Cool.. found it already .position(XXX);

  2. #3 by esteewhy on May 5, 2011 - 16:28

    The following patch solves inability to work over :

    Index: jquery.splitter-0.1.js
    — jquery.splitter-0.1.js (revision 4346)
    +++ jquery.splitter-0.1.js (revision 4502)
    @@ -131,7 +131,7 @@
    if (spliters.length == 0) { // first time bind events to document
    $(document.documentElement).bind(‘mousedown.spliter’, function() {
    if (spliter_id !== null) {
    – current_spliter = spliters[spliter_id];
    + current_spliter = spliters[spliter_id];$(”).insertAfter(current_spliter);
    if (current_spliter.orientation == ‘horizontal’) {
    $(‘body’).css(‘cursor’, ‘row-resize’);
    } else if (current_spliter.orientation == ‘vertical’) {
    @@ -140,7 +140,7 @@
    return false;
    }).bind(‘mouseup.spliter’, function() {
    – current_spliter = null;
    + current_spliter = null;$(‘div.splitterMask’).remove();
    $(‘body’).css(‘cursor’, ‘auto’);
    }).bind(‘mousemove.spliter’, function(e) {
    if (current_spliter !== null) {

    • #4 by jcubic on August 2, 2011 - 14:18

      I apply your patch to version 0.2

  3. #5 by POL on May 10, 2011 - 17:27

    Hi there and thanks for sharing. Just curious, no IE support?

  4. #6 by Steven Green on July 29, 2011 - 16:42

    I give up trying to get the code to format properly…

    Bug in 0.2 regarding horizontal limit, where offset.left was being added twice Strangely the vertical versions of these are ok.
    Basically at lines 152 and153 remove the offset.left+ as that has already been taken into account when calculating x.

    • #7 by jcubic on August 2, 2011 - 14:07

      Thanks for reporting the bug I fixed this in version 0.3

  5. #8 by yotam on September 11, 2011 - 03:46

    It would be nice if dimensions (width,height) could be given
    by percentage of surrounding box.
    This will also require dynamic change when such surrounding box
    gets resized.

  6. #9 by Filipe Machado on September 13, 2011 - 13:13

    How to use the destroy method? Is it working?

    Thanks in advance.

    • #10 by jcubic on September 26, 2011 - 12:01

      You need to call destroy method on object returned by split (it’s jQuery object extended by split methods and properties)

      var split = $(…).split({orientation: ‘horizontal’});


  7. #11 by Drazen Dotlic on October 26, 2011 - 17:24

    Looks and works great.

    However, I was curious and wanted to see if I can improve the plugin for my own purposes (need to have multiple horizontal splitters but don’t want to nest them).

    Anyway, while looking into the source, I’ve noticed that on the beginning of the split drag (on mousedown actually), you are adding one artificial div just after the div being split. This div has a class ‘splitterMask’ and I have no clue as to why it’s there (it gets removed on the mouseup).

    Using Chrome’s developer tools, I’ve removed the code that adds/removes this ‘phantom’ div and seemingly everything still works.

    Could you please let me know the reasoning behind this div?

    Thanks in advance.

    P.S. Minor nitpick – splitter is written with two “t”s :)

    • #12 by jcubic on October 30, 2011 - 15:47

      This div is added by @esteewhy patch (in other comment), it supposed to fix issue in Internet Explorer, I didn’t tested it, just apply the patch, maybe I should. I just patch and see if plugin still work, it works so I left it as it is.

  8. #13 by Manny on March 28, 2012 - 15:38

    Hi, are there any user documents for this plugin? It works fine but the JQ plugin page is “Under Construction” still and I cant find any documentation for methods etc.


    • #14 by jcubic on April 3, 2012 - 09:07

      The all documentation is there (in example). This is very simple plugin and there are only 2 options limit and orientation (which can be horizontal or vertical).

  9. #15 by Aga on July 31, 2012 - 12:46


    Like Yotam said, in your plugin dimensions of a spliter_panel cannot be given by percentage of surrounding box. Do you have any idea how can i ressolve it?

    I would be grateful if you would reply.

    • #16 by jcubic on August 12, 2012 - 12:33

      It’s very simply plugin and in current state it don’t allow for setting percentage of the container. Maybe if I will have time I will add this feature.

    • #17 by jcubic on August 12, 2012 - 12:59

      Added postion option.

  10. #18 by Brian Cummings on September 11, 2013 - 03:17

    Hi Jakub,

    Thanks for a really great job on the jQuery Splitter!! One question – is there any way to express the ‘limit’ value in units other than pixels?

    Thanks in advance for your help!!



    • #19 by jcubic on September 18, 2013 - 10:02

      No, you can use only pixels. What units you would like to use instead?

  11. #20 by Sergio on January 16, 2014 - 22:23

    Any mode to set the widht of the first panel?

    • #21 by jcubic on January 29, 2014 - 12:50

      You can set position paramter (default is 50%) it’s position of the divider which in fact is the same as width of the first panel.

  12. #22 by Joel on July 13, 2014 - 16:29

    Any hint on how I’d change the position of the splitter programmatically after the initialization with .split? … Or, to clarify my actual goal, bind this property to a knockout.js vm?

    • #23 by jcubic on July 15, 2014 - 11:21

      Use position method:

      var s = $('#widget').width(700).height(400).split({
          orientation: 'vertical',
      • #24 by Joel on July 16, 2014 - 00:31

        Ooow!… I get something back from calling the split function! Now I see! Thank you! ;D

  13. #25 by Vu Le on January 15, 2015 - 05:41

    plz teach me, how can I save and load splitter after change size?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: