djorborn/partition.js

Split the screen into resizable partitions. Very easy to use.

Partition

Partition lets you make resizable elements. Pass it two elements that share the same parent element and the direction u want do split it, vertical or horizontal. Thats it.

var splitScreen = new Partition({
    direction: 'vertical',
    a: '#left',
    b: '#right',
    barWidth: '8'
});

To make a new Partition: new Partition({options}):

Options

• direction
  • horizontal
  • vertical
  • Is Required
• a and b
  • DOM element, String or DOM-Selector
  • Is Required
• bar
  • DOM element, String or DOM-Selector
  • Will be inserted between a and b if not added.
• barWidth
  • The thickness of the resize bar in pixels.
  • Default is 10
• stopGap
  • Where the the bar will stop in percent.
  • defualt is 10
• splitSize
  • The initial size of the elements in percent.
  • defualt is '50 50'
• iframe
  • Lets you resize over iframes
  • Boolean defualt = false

Example Code

HTML

<div id="app">
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS

#app {
    width: 500px;
    height: 500px;
    margin: auto;
}
#left {
    background-color: pink;
}
#right {
    background-color: lightblue;
}

JS

var part = new Partition({
    direction: 'vertical',
    a: '#left',
    b: '#right',
})

Style Options

The bars will have the class name bar- plus the direction like bar-horizontal.