jQuery Plugin To Divide Webpage Into Several Sections - Splitter

File Size: 5.54 KB
Views Total: 9797
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Divide Webpage Into Several Sections - Splitter

Splitter is a jQuery plugin that lets you split the webpage into several resizable, horizontal (or vertical) sections, similar to the Html frame elements.

How to use it:

1. Import jQuery library and the jQuery splitter plugin into your webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.splitter.js"></script>

2. The html.

<div id="workspace">
  <div id="leftPane">
  <div id="rightPane">
    <div id="topPane">
      <p>Right Top</p>
    <div id="bottomPane">
      <p>Right Bottom</p>

3. Call the plugin on the content sections and config the orientation & size options.

  "orientation": "horizontal",
  "limit": 100

  "orientation": "vertical",
  "limit": 100

4. Default plugin settings.

// horizontal or vertical
"orientation" : "horizontal",

// Minimum size of left(top) element.
"limit" : 0,

// When window resized, keep left(top) size or not.
"keepLeft" : true,

// bar width
"barwidth": 4

// Callbacks
"paneResized" : null,
"windowResized" : null

Change log:


  • bugfix


  • Fix iframe bug
  • Added overlay.

This awesome jQuery plugin is developed by shunjikonishi. For more Advanced Usages, please check the demo page or visit the official website.