shagstrom/split-pane

jQuery Split Pane plugin

split-pane's Issues

Set splitter position dynamically

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);
}

Resize mouse cursor not showing on Internet Explorer 11

The Resize cursor is not showing on Internet Explorer 11, even in your examples at:
http://www.dreamchain.com/split-pane/

The mouse cursor just disappears.

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I am getting the error "Cannot read property 'offsetWidth' of undefined". This happens when using the basic setup code noted in the README (div class="split-pane fixed-left".. div class="split-pane-component" id="left-component"..div class="split-pane-divider" id="my-divider"/div..div class="split-pane-component" id="right-component"; and following the other styling provided).

The error is focused on line 133 of the split-pane.js file:
var maxFirstComponentWidth = splitPane.offsetWidth - lastComponentMinWidth - divider.offsetWidth;

I have experimented with the other settings (percentage-left, fixed-top, etc...) and the error occurs there are also. I am using jQuery in Rails, but I doubt that makes a difference. jQuery 1.11.

This error seems to occur if (i) there is anything at all at the top of the body above were the "split-pane fixed-left" line appears--even if it is not anything visible to user but just an empty div class, or (ii) there are any divs in between "split-pane fixed left" and "split-pane-component" id="left-component"...even if these divs have nothing in them. I am putting in these extra divs so I can grab on to them with jquery and add in the split pane classes as wrappers for those divs upon certain events happening, so I would like to keep those divs.

TypeError: internalHandler is not a function

I'm getting "Uncaught TypeError: internalHandler is not a function" on initializing my web page. I've gotten it replicated with some pretty simple code. Code is here (you will need to copy and paste the code and run locally).

https://raw.githubusercontent.com/ErikBrewster/splitpanetest/master/splitpane.html

Update jQuery

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.

cursor is changing when drag panel divider

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.

Problem after v0.9.2 when using iframe as component content

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>

how to add click event handler to pane-divider?

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.

How can I callback when I am dragging the divider?

Hello, Thanks your perfect plugin! Emm... How can I callback when I am dragging the divider?

Example -- Left Vertical Splitter

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!

Callbacks? Any plans for them?

Hi! I'm playing around with your script for a prototype and it's been great! A lot better and lightweight then a bunch of others I've looked at. However, I find myself needing to trigger something while (or after) I'm resizing the panes. Does this script currently support such callbacks? Any plans to do so? If you have any other suggestion, please let me know.

Thanks!

IE8 issue

$layoutRightPane.splitPane('lastComponentSize', 240)

There is an error :

Update minified version

Isn't actual anymore.

Quick-understanding with CSS

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.

Wrong placement of nested divider

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.

UI on Firefox : resize splitter and it auto selected contain on right panel

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();
        };
    }

Is there any way to reestablish the initial aspect of split-pane

Hi,
I would like to know if there is any way to reestablish the initial aspect of split-pane after doing changes in sizes of components.

Thanks in advance.

3 Column Layout

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.

changing the divider width

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 ?

Triggering layout refresh after manually setting new width?

Nice library. I think I spotted a typo on line 82:
$(document).one(endEvent, function(event) {
Should be on(), not one()?

By the way, is there an easy way to trigger a refresh after manually setting a new pane width (other than simulating a mousemove or calling/refactoring createMousemove())? For example, I have a button which should minimise a vertical pane when clicked:

$("#toggle-pane-left").on("click", function () {
  $("#left-component").width(0);
  $("#first-divider").css("left", 0);
 // insert function call here to update layout
});

Thanks

Hide or Close a Pane

Most of the code I read through in your project dealt with resizing by dragging.

And in firebug if I manually set the divider bottom and component height, the pane above did not resize to occupy the extra space.

Do you have a way to programmically hide or close a pane?

Any plans to make this available through node?

Issue title pretty much says it all. I see there is a fork available on node, but its a few releases behind.

specify initial left pane width in pixels

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!

Scrolling assumes split-pane occupies full browser window?

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?

Improve touch experience

1. Now divider is being "selected" when trying to drag on iPhone.

how to catch pane resized event?

Is there an API for that? THanks.

Add support for component max-width and max-height

resize font on draging

hey there,

i'm using the plug in a three column layout and it works like a charm!
right now i'm trying to resize the font-size depending on the .split-pane-component width. but i can't figure out how to do it.

any help is appreciated!

JQuery error when window is resized (but not when splitter dragged)

TypeError: 'undefined' is not an object (evaluating 'handlers.delegateCount')

I get this in the javascript console whenever the window is resized, but not when the splitter is directly resized. Also note, I had to change your line #40 to avoid a related problem… Maybe I just traded one problem for another? Here's my line# 40

jQuery.event.handlers.apply(element, arguments); // changed "handler" to "handlers"

I'm using JQuery 1.9.1.

Should not unbind foreign event handlers

Hello and thanks for a great plugin!

I found out that other components that bind the documents resize event stop working after having dragged the splitter. I believe this is because in the mouseDownHandler all resize event handlers are unbound, not just the one split-pane registered:

$(document).unbind(moveEvent);

One possible solution would perhaps be to use namespaces when binding and unbinding events?

Regards
Andreas

switch to and back full screen

What would be the best way to implement the following function:

function SwitchPanes(pane) {
  if (pane==='left') {
     // make left pane full screen, hide right pane
  } else if (pane==='right') {
    // make right pane full screen, hide left pane
  } else {
    // go back to split screen (last split widths)
  }
}

which styles do I need to change on which elements and to which values ? any help much appreciated.

thx!

window resize doesn't work for fixed-right

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);
    }
};

cursor: xxx \9 in CSS

Hey Simon,

I am looking into using your component and was wondering why you have several \9 suffixes when defining the cursors in the CSS, e.g. in cursor: w-resize\9;?

Thanks,

Lars

Uncaught TypeError: Cannot read property 'apply' of undefined

When I try to drag a .fixed-left it shows this error in the developers console
The error is on this line: jQuery.event.handle.apply(element, arguments);

This is because I'm using the latest version of jQuery and handle is deprecated/removed in that version. Instead I tried to do jQuery.event.dispatch.apply(element,arguments);
This however gives a result that the dragging isn't smooth.

offsetHeight issue

I am getting this error. Any idea please to solve this error?
I am using jQuery

set minimum left pane width

Is there a way to force a minimum width of the left pane so that the user can not make it smaller ?
Thx!

Binding Issue After Element Hidden

I have split-pane bound to two sets of panes.

$('#tabArchive div.split-pane').splitPane();
$('#tabLibrary div.split-pane').splitPane();

Follow the picture from top to bottom. Click tab, click other tab, click back to original tab. The panes seem to be broken when I go back. Any ideas?