/Partition.js

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

Primary LanguageJavaScript

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.