#mySplitter, .splitter-container width: 100%; height: 500px; /* Fixed or min-height */
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jquery.splitter.css"> <style> body, html height: 100%; margin: 0; padding: 0; #mainSplitter width: 100%; height: 100%; .left-pane background: #f4f4f4; padding: 10px; overflow: auto; .right-pane background: #fff; padding: 10px; overflow: auto; .splitter-bar background: #333; width: 5px; .splitter-bar:hover background: #e67e22; </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="jquery.splitter.js"></script> <script> $(function() $('#mainSplitter').splitter( type: 'v', size: 300, minSize: 150, maxSize: 600, cookie: 'mainSplitterPos', onResize: function(e, ui) $('#status').text('Left pane width: ' + ui.size + 'px');
#mySplitter > div overflow: auto;
Create a container div with two or more child divs:
A jQuery Splitter plugin allows you to divide a web page or container into two or more resizable panels (vertical or horizontal). Users can drag a divider bar to adjust the relative size of each pane. jquery splitter plugin
Parent container has no defined height/width. Fix:
(function($) $.fn.splitter = function(options) var settings = $.extend( orientation: "vertical", limit: 100, onDrag: null // Callback function , options); #mySplitter,
$('#mySplitter').splitter( type: 'v', size: 250, // Left pane 250px wide minSize: 100, maxSize: 500, onResize: function(event, ui) console.log('New sizes:', ui.size);
One evening, as he was working late, John had a eureka moment. He would create a plugin that used jQuery's existing event handling and animation capabilities to create a simple, intuitive splitter interface. He scribbled down some notes and started coding. Fix: (function($) $