shagstrom / split-pane Goto Github PK
View Code? Open in Web Editor NEWjQuery Split Pane plugin
License: MIT License
jQuery Split Pane plugin
License: MIT License
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);
}
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.
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.
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
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 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.
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>
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.
Hello, Thanks your perfect plugin! Emm... How can I callback when I am dragging the divider?
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!
Isn't actual anymore.
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.
I was trying to create the following layout:
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.
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();
};
}
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.
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'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 ?
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
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?
Issue title pretty much says it all. I see there is a fork available on node, but its a few releases behind.
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!
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?
Is there an API for that? THanks.
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!
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.
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
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!
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);
}
};
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
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.
Is there a way to force a minimum width of the left pane so that the user can not make it smaller ?
Thx!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.