The .split-pane-component, .split-pane-divider-inner and .split-pane-divider have a z-index of 1 or 2. These values can interfere with the CSS of a project in which this plugin is used, in my case a modal with a z-index: 1;.

In my opinion these values are not needed for this plugin to function. It looks like they are there for legacy reasons and are not needed anymore.

@shagstrom would it makes sense to remove them? Or are they needed for a functioning split-pane?

I was wondering whether you'd be open to allowing setting the splitter position dynamically. My use case for this is remembering the last splitter position of the user.

I'm currently doing this outside of your code via the following:

var pane = $('div.split-pane').children('.split-pane-divider');

function triggerSplitterDrop (vDrop) {
    var offset = pane.offset();
    var ev = {
        which: 1,
        pageX: offset.left,
        pageY: offset.top
    };
    var mdEvent = $.Event('mousedown', ev);

    ev.pageY = vDrop || offset.top;
    var mmEvent = $.Event('mousemove', ev);
    var muEvent = $.Event('mouseup', ev);

    pane.trigger(mdEvent);
    pane.trigger(mmEvent);
    pane.trigger(muEvent);
}

I want to hide the pane when user click to the divider. But code like this does not work:

$( "#pane-divider" ).on('click', function(){
    $("#split-pane").splitPane('firstComponentSize', 0);"
});

The event handler is never reached. It seems the event propagation is stopped in your code.

I'm looking to implement a 3 vertical column layout with your plugin. Similar to the vertical 2 column except with an additional 3rd vertical column.

I haven't had much success. Is this possible? How would the HTML look like? Thanks.

I was trying to create the following layout:

• Vertical divider with left component fixed
  • Left pane: Horizontal divider and top and bottom component widths in percent (30/70).
  • Right pane: Horizontal divider and top and bottom component widths in percent (65/35).

In Chrome 35.0.1916.153, the horizontal divider within the left pane seems to not be resizable. It actually can be resized but the "handle" is in the wrong place (move pointer up and down will reveal its location).

In Firefox 20.0 both horizontal dividers are initially misplaced.

In both browsers, after the nested split pane has been resized once, the handle is in the right place.

I'll attach my test html page.

All your demos show the split-pane occupying the whole browser window. I didn't think much of it at the time. For my needs, I have a horizontal banner div at the top of the window and a horizontal split-pane taking up the remainder below. When the content of the split-pane requires scrolling, it never quite reaches the bottom of the content. It seems to be short by the same height as my banner. Any ideas?

Can I just suggest you make it clear on how to use this - when it comes to CSS. It seems like, given all your examples, you have to get the html/css all setup (maybe 100 lines) before you can use this.

But you've written that this is your "preference" and that is all.

Is it because it won't work any other way or you just prefer to create examples like this?

Then looking at the examples, I have to study carefully to figure out what CSS is in your own library and what I need to introduce.

Is it possible to specify the initial left pane width in pixels ?

I tried remarking 'right' in #left-component and #my-divider and replacing them with left:190px; but not sure how to change the 'width' in #right-component ?

thx!

I got this issue & find some solution. I think I should contribute to you fix it, maybe can help more developer.

function removeAutoSelecteTextOnDocument() {
        //remove select text on document
        if (window.getSelection) {
            if (window.getSelection().empty) {  // Chrome
                window.getSelection().empty();
            } else if (window.getSelection().removeAllRanges) {  // Firefox
                window.getSelection().removeAllRanges();
            }
        } else if (document.selection) {  // IE?
            document.selection.empty();
        }
    }

And call it on every handler, exp:

function fixedLeftHandler(components, pageX) {
        var firstComponentMinWidth = minWidth(components.first),
            maxFirstComponentWidth = components.splitPane.offsetWidth - minWidth(components.last) - components.divider.offsetWidth,
            leftOffset = components.divider.offsetLeft - pageX;
        return function(event) {
            event.preventDefault && event.preventDefault();
            var left = newLeft(firstComponentMinWidth, maxFirstComponentWidth, leftOffset + pageXof(event));
            setLeft(components.first, components.divider, components.last, left + 'px');
            $(components.splitPane).resize();
            removeAutoSelecteTextOnDocument();
        };
    }

This code doesn't work for fixed-right pane, and fixed-left works fine.

$(document).on('resize', function() {
  console.log('resized')
}).trigger('resize')

I comments this line for work around event.stopPropagation();

/**
 * A special event that will "capture" a resize event from the parent split-pane or window.
 * The event will NOT propagate to grandchildren.
 */
$.event.special._splitpaneparentresize = {
    setup: function(data, namespaces) {
        var element = this,
            parent = $(this).parent().closest('.split-pane')[0] || window;
        $(this).data(SPLITPANERESIZE_HANDLER, function(event) {
            var target = event.target === document ? window : event.target;
            if (target === parent) {
                event.type = "_splitpaneparentresize";
                $.event.dispatch.apply(element, arguments);
            } else {

                //event.stopPropagation();
            }
        });
        $(parent).on('resize', $(this).data(SPLITPANERESIZE_HANDLER));
    },
    teardown: function(namespaces) {
        var parent = $(this).parent().closest('.split-pane')[0] || window;
        $(parent).off('resize', $(this).data(SPLITPANERESIZE_HANDLER));
        $(this).removeData(SPLITPANERESIZE_HANDLER);
    }
};

I'm not able to change the divider width. For example in percent-vertical.html in #my-divider { right: 80%; width: 5px; }

I tried to change width to 1px but it did not seem to have any effect. Any help ?

The resize events from the divider do not respond properly when dragging over top of the iframe after changes made between v0.9.2 and v0.9.3.

Place the following in a file for an example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>Basic Example</title>
		<link rel="stylesheet" href="../split-pane.css" />
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
		<script src="../split-pane.js"></script>
		<style type="text/css">
			html, body {
				height: 100%;
				min-height: 100%;
				margin: 0;
				padding: 0;
			}
			.split-pane-divider {
				background: #aaa;
			}
			#left-component {
				width: 20em;
			}
			#divider {
				left: 20em; /* same as left component width */
				width: 5px;
			}
			#right-component {
				left: 20em;
				margin-left: 5px; /* same as divider width */
			}
		</style>
		<script>
			$(function() {
				$('div.split-pane').splitPane();
				$('.split-pane-divider').on('click', function () {
					console.log("click");
				})
			});
		</script>
	</head>
	<body>
		<div id="split-pane-1" class="split-pane fixed-left">
			<div class="split-pane-component" id="left-component">
				This is the left component
			</div>
			<div class="split-pane-divider" id="divider"></div>
			<div class="split-pane-component" id="right-component">
				<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
				<button onclick="$('div.split-pane').splitPane('firstComponentSize', 0);">Collapse first component</button>
			</div>
		</div>
	</body>
</html>

1. Having a problem figuring out how to make the left and right panes set to percentage. As far as I can see, all of the examples which use left and right panes have fixed left panes. Would appreciate any help on this.
2. Would like to save the positions of the splitters to a DB and reload them (per user). Thanks!

There is a severity high vulnerability in jquery on which split-pane depends.

$ yarn audit
yarn audit v1.13.0
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Cross-Site Scripting (XSS)                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ jquery                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=3.0.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ jquery                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ jquery                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/328                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
1 vulnerabilities found - Packages audited: 1
Severity: 1 High
Done in 0.41s.

You should improve it by updating jquery to version 3.0.0 or later.

When splitPane becomes hidden its offsetWidth and offsetHeight is set to zero. This triggers resize handler. Then it calculates maxFirstComponentWidth as a difference between zero offsetWidth and other values, which produces and passes negative "left" value into setLeft. As a result the whole panel shifts beyond the screen after becoming visible again.

Cursor twitches and changing style from col-resize to default when im dragging divider, especially it can be clearly seen in Internet Explorer 10/11.

It is problem of version 0.9.3. In 0.9.2 all is fine.