Split Pane jQuery plugin

I have created a jQuery plugin for adding split panes to you web site or web application.

Split panes can be nested. Component min-widths and min-heights are supported. I have not implemented support for max-width and max-height, yet.

Component size can be set programmatically.

I’ve tested the code in the latest versions of Chrome, Firefox and Safari on OS X, and in IE8 on XP.

The source code can be found at github.

Please give me you feed back!

Check out the following pages for examples on how to use it:

N.B., not all markup in the examples are needed for setting up the split panes. <div class="pretty-split-pane-frame"> and <div class="pretty-split-pane-component-inner"> are used for styling purposes only. Feel free to use them, but you might want to style things your own way.

18 Responses to Split Pane jQuery plugin

  1. Hi Simon,

    Woks absolutely great and quite simple to use !
    I am impressed by your blogs and the broad technical knowledge you show.
    Thanks for sharing,


  2. Hi Simon – I like the plug in. Thank you very much! One thing I feel is missing is the “outline” mode that was supported in Dave Methvin’s splitter (I was using it until recently but decided to move on because it does not work with jQuery over 1.4). It allows the user to move the “zombie” divider and only resize split panes ONCE on mouseup. I work on enterprise business apps with dashboards and the issue with immediate resize is that IF the contents of the panes are large scrollable grids (fit to the pane sales orders, inventory parts, etc), the browser behavior becomes jerky when the divider is moved. Your code is very clear and I was able to make minimal modifications to it to support the outline by cloning the divider on mousedown (borrowed from Dave’s approach). However, it’s not the prettiest solution because of how the resizing math is currently packaged in createMousemove. Just a suggestion, in case you are planning to improve the plugin in the future. I don’t think there is anything lightweight of similar quality and functionality out there.

    • Thanks for the feedback! I have also worked with visualizing large datasets, so I’m familiar with your problem. It’s a good suggestion, I will definitely consider implementing that.

  3. Can it support bootstrap responsive layout inside splitter div. Means if resize splitter by split bar then it make div responsive?

    • That shouldn’t be a problem. Using container-fluid is probably best. One thing to keep in mind is that media queries, controlling when phone/tablet/desktop layouts are used, react on browser width not split-pane-component width.

  4. Split screen desktop view working very perfect, but not working touch screen tab and mobile. Please help me any solution.

    • Please try version 0.5.2 and let me know if that version solved your problem. A have fixed a touch related bug in that version.

  5. What’s the correct way to put a non-resizable bar across the top of the page? I tried to add a regular div above the split pane ones and ended up with a vertical scrollbar on the page. I tried to wrap it in a container, but all of the split pane divs shrunk down to minimum size. The wrapping method I used was from http://jsfiddle.net/naqE6/

    • Banner and main divs need to be position: absolute; width: 100%; left: 0. Main top = banner height. Main bottom = 0.

      		<div class="banner">BANNER</div>
      		<div class="main">
      			<div id="split-pane-1" class="split-pane fixed-left">
      				<div class="split-pane-component" id="left-component">
      					This is the left component
      				<div class="split-pane-divider" id="divider"></div>
      				<div class="split-pane-component" id="right-component">
      					This is the right component

      You will find a working example here

  6. Is it tested in Android OS? i I tried to test your example page “Vertical divider with right and left component widths in percent”. It works fine in iOS – iphone, but not worked in Android OS – tablet PC. I opened the page in Chrome and the version of android is 4.4.4. plz reply. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>