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'
});
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>
<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;
}
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',
})
direction: 'vertical',
a: '#left',
b: '#right',
})
Style Options
The bars will have the class name bar- plus the direction like bar-horizontal.