Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Jquery Splitter Plugin |best| Info

<!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'); ); ); </script> </head> <body> <div id="mainSplitter"> <div class="left-pane"> <h3>Navigation</h3> <ul><li>Item 1</li><li>Item 2</li></ul> </div> <div class="right-pane"> <h3>Content Area</h3> <p>Drag the splitter bar →</p> <div id="status"></div> </div> </div> </body> </html> 12. Alternatives (if you need more features) | Plugin | Features | |--------|----------| | Split.js | Lightweight, no jQuery dependency, supports multiple panes | | AlloyUI Splitter | More complex, part of YUI but can be used standalone | | GoldenLayout | Full window layout manager (overkill for simple splitters) |

Include files:

$('#mySplitter').splitter( resizeToWidth: true ); Cause: Missing CSS file or incorrect path. Fix: Check network tab in dev tools, ensure jquery.splitter.css is loaded. Issue 4: Content overflow Fix: Apply overflow to panes: jquery splitter plugin

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. Issue 4: Content overflow Fix: Apply overflow to

<div id="outerSplitter"> <div id="leftPane"> Left Content </div> <div id="rightSplitter"> <div>Top Right</div> <div>Bottom Right</div> </div> </div> $(function() // Outer vertical splitter $('#outerSplitter').splitter( type: 'v', size: 300 ); // Inner horizontal splitter in right pane $('#rightSplitter').splitter( type: 'h', size: 200 ); ); $('#mySplitter').splitter( onResizeStart: function(event, ui) console.log('Resizing started. Current size:', ui.size); , onResize: function(event, ui) // ui.size = current size of first pane $('#sizeDisplay').text(ui.size + 'px'); , onResizeEnd: function(event, ui) alert('Resize finished at ' + ui.size + 'px'); // Save preference to localStorage localStorage.setItem('splitterPos', ui.size); ); 8. Persisting Splitter Position Using cookie option: $('#mySplitter').splitter( cookie: 'mySplitterPos' // Stores position in cookie ); Using localStorage manually: var savedSize = localStorage.getItem('splitterPos') || 250; $('#mySplitter').splitter( size: savedSize, onResizeEnd: function(event, ui) localStorage.setItem('splitterPos', ui.size); Current size:', ui

.splitter-bar-vertical background-image: none; /* Remove default grip */