Hello,
I wonder that Split.js supoort cookie.

This is a minor issue I noticed. Please check this demonstration. It's also reproducible on your website.

Click and hold the first gutter from the left and move it left and right. Everything is smooth and perfect. You can see the cursor type remains the same.

Do the same on the second or third gutter. When you move the gutter to left, cursor type kind of flickers between default and col-resize. When you move it to right, col-resize is completely lost and it becomes default.

Hi,

Just wanted to ask a couple of questions :

https://github.com/nathancahill/Split.js/blob/master/split.js#L265

sets isFirst if i is 1. That's a little unobvious, but I can see later on that you're talking about pairs - ie the splitter always goes between two elements.

isLast makes sense either way.

However, lower down I see :

https://github.com/nathancahill/Split.js/blob/master/split.js#L314

I was wondering why you half the gutter size for i===0 instead of i==1 (not sure why == changed to == either - is there something I'm missing there?).

Hrm, I guess I'm just confused by the variable names? isFirst doesn't mean first element, but second element of first pair? isLast seems the same though.

I was originally trying to figure out why my splitter has broken with an upgrade to the latest version - I guess I still need to figure out what's going on. I currently have :

          Split(this.getContentChildren(), { sizes: [60, 40] });

Thanks for any insights.

Max.

I want to be able to dynamically create and remove splits. Obvs we can create splits but is there a way to dynamically remove splits also?

Provide method i.e. destroy to remove all listeners.

Sorry, again :)

The fact that I have to give element ids, when initializing Split.js seems to be limiting. In many project, using ids are discouraged.
The getElemetById may could be replaced with querySelector, that would accept any kind of selector.

be cool if someone added an Angular2 wrapper...
if added, I would add this to http://ng2.javascriptninja.io
Regards,

Sean

Make available through webjars/Maven

Issue with widths

I'll write more when I can get home and use a computer and dev tools to inspect what is happening
I may also test with all of my other devices later

It put what seems to be the simplest example here

It's just this

<div>
        <div id="left"> foo </div>
        <div id="right"> bar </div>
</div>
<script src="https://nathancahill.github.io/Split.js/split.js"></script>
<script>
Split(["#left", "#right"], {});
</script>

plus the CSS copied from the demo page docs

and yet nothing happens. I'm probably doing something completely stupid and it's staring me in the face.

Not sure if this is possible, but it looks bad with nested divs.

IE 10+ look fine with: -ms-overflow-style: -ms-autohiding-scrollbar;

Remember last state in Local Storage =)

Creates a global function, please implement a way to prevent global namespace pollution and export the module, in short AMD support.

onDragEnd event is triggered unexpectedly on mouse over without even dragging the gutter. I've created an example here to demonstrate the problem.

• Hover your mouse from div id one to div id two: dragEnd event for div three-four is triggered.
• Hover your mouse from div id two to outside of example div: dragEnd event for div one-two is triggered.
• Hover your mouse from div four to outside of example div: dragEnd event for both one-two and three-four is triggered.
• When you actually resize the vertical split panels, dragEnd is triggered for the parent panel too.
• Clicking inside the panels also triggers the dragEnd.

The version of Webkit included in PhantomJS 1.9.x does not include support for -calc or -webkit-calc. When running the tests with grunt jasmine, all tests fail.

Manually updating gruntjs/grunt-lib-phantomjs to use PhantomJS2 results in the tests hanging. Here's the relevant issue: gruntjs/grunt-lib-phantomjs/issues/74

Once this is fixed, we can use a CI service for testing.

Running "jasmine:test" (jasmine) task
Testing jasmine specs via PhantomJS

 Split
   X splits in two when given two elements
     Expected '' to be 'calc(50% - 5px)'. (1)
     Expected '' to be 'calc(50% - 5px)'. (2)
   X splits in three when given three elements
     Expected '' to be 'calc(33.3333% - 5px)'. (1)
     Expected '' to be 'calc(33.3333% - 10px)'. (2)
     Expected '' to be 'calc(33.3333% - 5px)'. (3)
   X splits vertically when direction is vertical
     Expected '' to be 'calc(50% - 5px)'. (1)
     Expected '' to be 'calc(50% - 5px)'. (2)
   X splits in percentages when given sizes
     Expected '' to be 'calc(25% - 5px)'. (1)
     Expected '' to be 'calc(75% - 5px)'. (2)
   X splits in percentages when given sizes
     Expected '' to be 'calc(25% - 5px)'. (1)
     Expected '' to be 'calc(75% - 5px)'. (2)
   X accounts for gutter size
     Expected '' to be 'calc(50% - 10px)'. (1)
     Expected '' to be 'calc(50% - 10px)'. (2)
   X accounts for gutter size with more than two elements
     Expected '' to be 'calc(33.3333% - 10px)'. (1)
     Expected '' to be 'calc(33.3333% - 20px)'. (2)
     Expected '' to be 'calc(33.3333% - 10px)'. (3)
   X accounts for gutter size when direction is vertical
     Expected '' to be 'calc(50% - 10px)'. (1)
     Expected '' to be 'calc(50% - 10px)'. (2)
   X accounts for gutter size with more than two elements when direction is vertical
     Expected '' to be 'calc(33.3333% - 10px)'. (1)
     Expected '' to be 'calc(33.3333% - 20px)'. (2)
     Expected '' to be 'calc(33.3333% - 10px)'. (3)

Hello! First of all, thanks for provinding this utility.
I'm using Split.js in a simple web app where it's very common to open the developer console, thus resizing the window. I need my left pane to keep a minimum width since otherwise the layout breaks.
Looks like there is no refresh/ fitMin method exposed to be called on window.onresize. Perhaps this could be added for another release?

For now I'm manually triggering click events and somehow it works, although it's pretty ugly and not very efficient 😅 :

var refreshSplit = function() {
  var mousedown = new CustomEvent('mousedown');
  var mousemove = new CustomEvent('mousemove', {bubbles: true});
  var mouseup = new CustomEvent('mouseup', {bubbles: true});
  var gutter = document.querySelector('.gutter-horizontal');

  mousemove.clientX = gutter.getBoundingClientRect().left;

  gutter.dispatchEvent(mousedown);
  gutter.dispatchEvent(mousemove);
  gutter.dispatchEvent(mouseup);
};

And then throttling that:

var lock;
window.onresize = function() {
  clearTimeout(lock);
  lock = setTimeout(refreshSplit, 100);
};

I would like to see an enhancement to be able to collapse a split panel.
Essentially 'collapse()' would set the width (or height) to zero and the panel next to it to 100%.
A call to 'expand()' would bring back the gutter to the last state.
Collapse should also be available when min-size is not 0.

At least none I could see (Chrome latest stable, OS X).

Hi Nathan,

I'm unable to find a changelog. As I'm willing to use your library in a production app, I need to know what changes happend since the last version to verify if I have to upgrade and what could go wrong if I do. It would be very appreciated if you could add a changelog/history. Thanks 👍

Hey I'm trying to make the split items full height of the browser window minus the height of the navbar.
But when setting the height to for example 100% . The split view functionality does not work anymore.
How can I achieve this?

Thanks for the help!

It would be nice if a user can toggle(open/close) any Pane by clicking on the gutter.

EDIT: sorry, I didn't see #27

Each element has scroll bars in IE, even when content is not overflowing.

I have a problem using Split.js with my browserify-based project.
Browserify packages every module into a function call, so when Split.js is imported, the .call(this) at the end of the module won't refer anymore to the global window object, but it will be undefined.

Do you have a suggestion to this problem?

I need to manipulate the split position programmatically, it would be useful if the Split function would return an object, that can contain API functions like this.

I solved it temporarily like this:

Split = function (ids, options) {
...
    return {
        resize: function(size) {
            adjust.call(pair, size);

            if (options.onDrag) {
                options.onDrag()
            }
        }
    }
}

The README suggests bower install split.js should work, but, unless I'm very much mistaken, it doesn't.

It seems like it should be capitalised, ie bower install Split.js.

For some reason, I have to disable the css height of my container, drag the splitter a random amount, and then re-enable the height property in order for the splitter to work. Until I do that I can't move the splitter at all. Any idea why this might be or how I could simulate that effect to get it to work?

To clarify, I have a vertical splitter of two divs and initially if you try to drag the splitter, nothing happens. However, if you hit F12 in Chrome (latest version), disable the height on the container, drag it a little bit, and then re-enable the height, then it works flawlessly.

Just disabling and re-enabling the height doesn't work and so does just dragging it. It has to be dragged while the height property is disabled. It's extremely weird and took me forever to figure out this workaround. Any idea why this might be or how I can fix it?

1. Open http://nathancahill.github.io/Split.js/ in Chrome
2. Resize the browser window to about 800 pixels in width
3. Reload the page
4. Increase the width of the browser window

This causes empty white space to the right of the second split pane, which at least in my case is incorrect. The desired behavior would be to have the panes to increase in size to fill the container.

Hi,

In my application there are multiple split panel. So we have to provide feature like user could remove or add any panel dynamically.
So are you supporting this feature right now. If yes, then please let me know how to achieve this.

If I split like this:

Split(['lileftpanel', 'rightpanel'], {
sizes: [5, 95],
minSize: [200, 200]
});

and my container is 600px wide, the initial size of the first pane get set to 5% of 600 which is 30px which is smaller than the minsize I set. minSize should overwrite the initial size if it is bigger.

Otherwise it would be nice to be able to specify the initial sizes in pixel (not just in percentage) so I can align panes with other elements located on top of them.

Preparing the test environment with 'npm install' fails at the PhantomJS stage on Ubuntu 14.04:

npm ERR! Linux 3.19.0-47-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! This is most likely a problem with the phantomjs2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls phantomjs2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/q/Split.js/npm-debug.log

Log file: npm-debug.zip

When a split pane has a right side with a 0 minimum width, the scrollbar will hide the grip, making it impossible to change the size again. Tested with Firefox 42.
A demo with a fully collapsible pane would be nice.

I think this is caused by clientWidth returning an integer, which is then used to calculate percentages. When done repeatedly, it makes the sides creep right or left.

Using getBoundingClientRect() might fix this.

Please provide licencing so people can use it.

Looks like not so good decision.
parent[addEventListener]('mouseleave', stopDragging.bind(pair))

Any careless mouse move can break resizing.

is there an api to call to show/hide certain div? would be nice for shortcut button.

I find myself wanting to supply a list of nodes rather than css selectors. Is there an option? If not, is it plausible that it could be added?

You can use touch to resize in Chrome, but when I tried to with Edge, it doesn't work (using mouse does work in Edge (but that doesn't work well with a tablet))

The latest on npm is 1.0.6: https://www.npmjs.com/package/split.js

By wrapping the page within a div (open it just after body and close it just before /body) the layout seems broken. Is there any workaround for this?

thanks

Davide

Hi there! I was just wondering if anyone has built anything integrating this with Angular. My idea is that there would be a split-area directive that you could use in your app to make divs inside of it automatically split-able. I'm playing around with it with @CCole and having some trouble getting a minimal example working

Would it be possible to get the current sizes of the split pairs in the callbacks? I need to update an external source on dragend.

So we could align initial panes sizes with other elements in the page.

If parent has flex-direction as row-reverse, the sequence of the elements in the DOM doesn't actually reflect the visual sequence and hence the library logic breaks and causes unintended resizing.

I have 3 columns on total width page: 25% / 50% / 25%.
It displays nice but when I drag the gutter, instead of becoming something like 24.6353% / 50.3647% / 25% like it does normally (without angular2), it becomes: 32.8147% / 67.1853% / 25%
=125% so last column go under..

You can see it there:
https://plnkr.co/edit/VrWZOf?p=preview

Problem when dragging split bar fast, it stops suddenly.
I have to go back and move it slowly. This happens when the first and second divs contain lots of content. Happens under Chrome, Firefox and Internet Explorer.

Because of a float division or rounding error, when splitting in 3 or more panes, the total width is too wide and the last pane falls off.