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.
jQuery splitter – split container
Published by
Jakub T. Jankiewicz 
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
Cool.. found it already .position(XXX);
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) {
I apply your patch to version 0.2
Hi there and thanks for sharing. Just curious, no IE support?
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.
Thanks for reporting the bug I fixed this in version 0.3
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.
How to use the destroy method? Is it working?
Thanks in advance.
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();
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 :)
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.
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
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).
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.
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.
Added postion option.
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
No, you can use only pixels. What units you would like to use instead?
Hi
Any mode to set the widht of the first panel?
Thanks
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.
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?
Use position method:
var s = $('#widget').width(700).height(400).split({ orientation: 'vertical', limit:100 }); s.position(30);Ooow!… I get something back from calling the split function! Now I see! Thank you! ;D
plz teach me, how can I save and load splitter after change size?