JQuery : Vertical_pane_splitter

script.js

$(document).ready(function(){
$('#splitter > div:first').resizable({
handles : 's',
minWidth : '50',
maxWidth : '200',
resize : function() {
var remainingSpace = $(this).parent().height() - $(this).outerHeight();
var divTwo = $(this).next();
var divTwoHeight = remainingSpace - (divTwo.outerHeight() - divTwo.Height());
divTwo.css('height',divTwoHeight + 'px');
}
});
});

splitter.css

#splitter {
height: 300px;
margin-bottom: 40px;
}
#splitter .pane {
height: 50%;
}

#splitter h2 {
margin-bottom:0;
padding-bottom:0;
}

#tocPane {
overflow: hidden;
background:#d6dde5 url(handle.png) no-repeat center bottom;
}

#tocPane .inner {
height: 150px;
}

#contentPane {
overflow: auto;
border-bottom: 2px solid #d6dde5;
}

#contentPane .inner {
padding: 0 5px;
}

Bookmark the permalink.

Comments are closed.