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.

partition.js's Issues

Cant Resize over iframe

When resizing, if the mouse goes over an iframe, it leaves the window and stops the partition from moving and catches the mousedown.
.if I add clear div's over the partitions while resizing I think that could fix it

Examples & Quad

Not really a issue but I think it would be good to add Quad example as well as live examples.

Confusing Readme

The readme file needs to say more about the fact that the two elements must have a parent element just for them

Border and Bar

I would like to add a border around the base pair that matches the bar. this will be the same color as the bar.

CSS class naming broken

Need to add or fix, adding class to bar. vertical bar gets bar-vertical & horizontal bar-horizontal.

Stop Gap Issue

data.stopGap seems to be having an issue of not really working. It most likely is the if (percent > data.stopGap) area.

Where is the bar?

The default bar is clear making it hard to see and understand what is going on so lets make it white and give an option like "barColor" to edit it.