I have created a jQuery plugin for adding split panes to you web site or web application.
Split panes can be nested. Component min-widths and min-heights are supported. I have not implemented support for max-width and max-height, yet.
Component size can be set programmatically.
I’ve tested the code in the latest versions of Chrome, Firefox and Safari on OS X, and in IE8 on XP.
The source code can be found at github.
Please give me you feed back!
Check out the following pages for examples on how to use it:
- Vertical divider with left component fixed
- Vertical divider with right component fixed
- Vertical divider with right and left component widths in percent
- Horizontal divider and top component fixed
- Horizontal divider and bottom component fixed
- Horizontal divider and top and bottom component widths in percent
- Nested split panes
- 3 columns with left and right components fixed (nested)
N.B., not all markup in the examples are needed for setting up the split panes. <div class="pretty-split-pane-frame"> and <div class="pretty-split-pane-component-inner"> are used for styling purposes only. Feel free to use them, but you might want to style things your own way.
Hi Simon,
Woks absolutely great and quite simple to use !
I am impressed by your blogs and the broad technical knowledge you show.
Thanks for sharing,
DD
This thing seems excellent. I JSFiddled it with jQuery 2.10 and it works fine.
Hi,
I encountered some problems using the split-pane and I can’t understand where I wrong. Can you help me? You will find the split-pane divs @ http://www.corradimpianti.com/timelineprova
Thanks
Sure, I think that the problem is that you have not set a width on the divider. That a look at the source of http://dreamchain.com/static/split-pane/percent-vertical.html .
Remember to also set the margin-right on the left component to the same value as the divider width (also see source of link above).
Hi Simon – I like the plug in. Thank you very much! One thing I feel is missing is the “outline” mode that was supported in Dave Methvin’s splitter (I was using it until recently but decided to move on because it does not work with jQuery over 1.4). It allows the user to move the “zombie” divider and only resize split panes ONCE on mouseup. I work on enterprise business apps with dashboards and the issue with immediate resize is that IF the contents of the panes are large scrollable grids (fit to the pane sales orders, inventory parts, etc), the browser behavior becomes jerky when the divider is moved. Your code is very clear and I was able to make minimal modifications to it to support the outline by cloning the divider on mousedown (borrowed from Dave’s approach). However, it’s not the prettiest solution because of how the resizing math is currently packaged in createMousemove. Just a suggestion, in case you are planning to improve the plugin in the future. I don’t think there is anything lightweight of similar quality and functionality out there.
Thanks for the feedback! I have also worked with visualizing large datasets, so I’m familiar with your problem. It’s a good suggestion, I will definitely consider implementing that.
Perfect!
Can it support bootstrap responsive layout inside splitter div. Means if resize splitter by split bar then it make div responsive?
That shouldn’t be a problem. Using
container-fluidis probably best. One thing to keep in mind is that media queries, controlling when phone/tablet/desktop layouts are used, react on browser width notsplit-pane-componentwidth.Split screen desktop view working very perfect, but not working touch screen tab and mobile. Please help me any solution.
Please try version 0.5.2 and let me know if that version solved your problem. A have fixed a touch related bug in that version.
Any way to resize the panes with Javascript? Otherwise great job.
Not super pretty, but you can do the following on http://dreamchain.com/static/split-pane/fixed-left.html .
$('.split-pane-component')[0].style.width = "0px"
$('.split-pane-component')[1].style.left = "0px"
$('.split-pane-divider')[0].style.left = "0px"
$('.split-pane').resize()
Before
After
Version 0.6.0 now supports setting component size with JS. Only pixel values supported.
$(‘#someSplitPane’).splitPane(‘firstComponentSize’, 0);
$(‘#someSplitPane’).splitPane(‘lastComponentSize’, 100);
What’s the correct way to put a non-resizable bar across the top of the page? I tried to add a regular div above the split pane ones and ended up with a vertical scrollbar on the page. I tried to wrap it in a container, but all of the split pane divs shrunk down to minimum size. The wrapping method I used was from http://jsfiddle.net/naqE6/
Banner and main divs need to be position: absolute; width: 100%; left: 0. Main top = banner height. Main bottom = 0.
You will find a working example here
Is it tested in Android OS? i I tried to test your example page “Vertical divider with right and left component widths in percent”. It works fine in iOS – iphone, but not worked in Android OS – tablet PC. I opened the page in Chrome and the version of android is 4.4.4. plz reply. Thank you.
Try version 0.5.2.
Can I add listener that is called after resizing. I need store these values on server – I need persist widths.
Thank You.
Version 0.7.0 supports this. Split pane fires dividerdragstart and dividerdragend events.
$('div.split-pane').on('dividerdragend', function (event, obj) { if (event.target === this) { console.log(obj); } });It’s Working Touch screen. Thank You So Much.
I found your plugin to be the best of all tried, especially since it is current code, unlike some plugins that have been abandoned and no longer run on the current framework. One question: I found all functionality to fail (no panes) when JQuery Mobile js is added to the HTML file. Much of the content I need to work with has JQMobile dependencies. Did I setup my demo file incorrectly, or is there a mismatch with Split Pane when JQM is added on top of JQ, but before Split Pane?
Thanks for using the plugin!
It looks like jquery mobile wraps everything inside <body> in a <div class=”ui-page”> that might break your code.
I hade to add
.ui-page { height: 100%; }to make it work with my nested example.
Take a look at http://dreamchain.com/static/split-pane/with-jquery-mobile.html .
Thank you so much, great piece of code, nice job!
I’m using it for a webpage that will be mostly viewed on mobile devices. I tested it on my Android mobile (S5 neo, 5.1.1) with latest chrome app and it works just fine.
Tested it now also with firefox and samsung browser were it does not work. The slider is highlighted but does not move.
Do you have an idea why?
Thanks a lot!
Thanks for reporting this. I’ll take a look at it.
Very good plugin! Thank you, Simon!
One question: can I add panes dynamically e.g – divide exist pane to two panes vertically or horizontally by some button click event? Or I will need init split-pane, add new DOM elements and after that re-init split-pane again?
Thank you!
Yes, you should be able to add a pane dynamically. Just run $(newPane).splitPane(); on the added pane.
Removing a pane could work, if it’s being done using any jQuery method, for example .remove() or parent.html(”).
Hi there! I’m trying to implement split panes inside Angular and can’t get past an error: Uncaught TypeError: Cannot read property ‘offsetWidth’ of undefined on line 167
Any suggestions?
I just started to use split pane, but I got the error
TypeError: internalHandler is not a function. (In ‘internalHandler(event)’, ‘internalHandler’ is undefined) at line 34.
I use JQuery 1.12.1
I have not seen this myself. I would need to see example code demonstrating this.
I’m seeing this, too. Here is some code that will reproduce it. Copy the file and execute it locally.
https://raw.githubusercontent.com/ErikBrewster/splitpanetest/master/splitpane.html
Your html code was broken. Check out my pull request fixing your code.
https://github.com/ErikBrewster/splitpanetest/pull/1/commits/9fb29557c1de3df6870aea5eef9de18a67a015e9
Is there a MAX Width property for panels?
Is there a way to disable resize and just have click to exand/click to collapse>
Excellent work!
max-width is not implemented. I’ve been wanting to do that for a long time but haven’t had time yet. Disabling dragging has not been implemented either, but would make a useful feature.
how can I have a fixed left panel, and one right panel that contains two hozitonzal rows where the first row contains two vertical columns? help me please… thanks
You would do that with nested split panes. The example http://dreamchain.com/static/split-pane/nested.html has 2 split panes in total, you would need 3 split panes. Look at how I did it in the example with 2 split panes and add a third in a similar manner.
Hi Simon, is neccesary to explicit the divider divs in my html?
( i.e. )
Doesn’t your plugin add them programmatically when needed?
Regards
Sorry, I posted html as example but it was stripped. I wanted to put…
<div class="split-pane-divider"></div>
Your code has been resolved my problem.
Thank you!