Splitter Script
$('#splitter > div:first').resizable({
handles: 'e',
minWidth : '100',
maxWidth : '400',
resize: function(){
var remainingSpace = $(this).parent().width() - $(this).outerWidth();
var divTwo = $(this).next();
var divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
divTwo.css('width', divTwoWidth + 'px');}
});
CSS Style
#splitter{
height:200px;
margin-top:20px;
margin-bottom:50px;}
#splitter .pane {
width:48%;
height:100%;
float:left;}
#tocPane {
overflow: hidden;
padding-left:20px;
padding-top:10px;
background-color: #E8E8E9;
background-image: url(../images/handle.png);
background-repeat: no-repeat;
background-position: right center;}
#tocPane .inner {
width: 330px;
font-family: "Myriad Pro Semibold", "Myriad Web Pro";
font-size: .8em;}
#tocPane .inner ol {
margin-left:20px;
font-family: "Myriad Pro Semibold", "Myriad Web Pro";
list-style-position: outside;
list-style-type: decimal;
margin-left:20px; }
.li_lower_roman {
margin-left:20px;
font-family: "Myriad Pro Semibold", "Myriad Web Pro";
list-style-position: outside;
list-style-type: lower-roman;
margin-left:20px; }
#contentPane {
overflow: auto;
width: 330px;
font-family: "Myriad Pro Semibold", "Myriad Web Pro";
font-size: .8em;}
#contentPane .inner {
padding: 0 5px;}
Horizontal Pane Splitter
Terms & Conditions
- Your Privacy
- Celeb's Privacy
- Ownership & Intellectual Property
Splitter
A splitter is a UI component that divides multiple areas on a page in a way that alows users to resize elements; this way, users are able to decide how much space they want to allocate each area.
Splitters are commonplace in desktop aplications, and with the explosion of Rich Internet Applications, they're making their way onto the Web.
Our splitter will consist of two div elements, representing each pane, nested inside of a containig element that has fixed dimensions. We'll encase the table of contents in a block-level element, so that when the user resizes the panes the text won't wrap and mess up our nested list.
Latest News
Which member of the seminal calypso/lectro band C&C Music Sweatshop was spotted last night at Dirt, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands? Yes! It's the ever-effervescent, Glendatronix!
Who lost their recording contract today? The Zaxntines!
Our Celebrities
We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast!
| ID | Name | Occupation | Approx. Location | Price |
|---|---|---|---|---|
| 203A | Johny Stardust (bio) | Front-man | Los Angeles | $39.95 |
| 141B | Beau Dandy (pic,bio) | Singer | New York | $39.95 |
| 2031 | Mo' Fat (pic) | Producer | New York | $19.95 |
| 007F | Kellie Kelly (bio,press) | Singer | Omaha | $11.95 |
| 8A05 | Darth Fader (pic) | DJ | London | $19.95 |
| 6636 | Glendatronix (bio,press) | Keytarist | London | $39.95 |
