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.

Published by

jcubic

I'm graphic designer and programmer from Poland.

25 thoughts on “jQuery splitter – split container”

  1. Hi!

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

    **
    Martin

  2. 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) {

  3. 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.

  4. 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.

    1. 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’});

      split.destroy();

  5. 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 :)

    1. 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.

  6. 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.

    Cheers
    M

    1. 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).

  7. Hi!

    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.

    1. 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.

  8. 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!!

    Best,

    Brian

  9. 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?

    1. Use position method:

      var s = $('#widget').width(700).height(400).split({
          orientation: 'vertical',
          limit:100
      });
      s.position(30);
      
      1. Ooow!… I get something back from calling the split function! Now I see! Thank you! ;D

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