Skip to content

Instantly share code, notes, and snippets.

@maxim75

maxim75/gist:975729

Created May 17, 2011 01:40
Show Gist options
  • Save maxim75/975729 to your computer and use it in GitHub Desktop.
Save maxim75/975729 to your computer and use it in GitHub Desktop.
Download ZIP
Splitter for panel resizing
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.leftpane, .rightpane
{
position: absolute;
height: 100px;
background-color: #EEEEEE;
}
.in
{
position: absolute;
top: 10px;
background-color: White;
bottom: 10px;
left: 10px;
right: 10px;
}
.splitter
{
width: 10px;
float: left;
height: 200px;
background-color: #AAA;
}
body
{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
<div id="content">
<div class="leftpane">
<div class="in"></div>
</div>
<div class="rightpane">
<div class="in"></div>
</div>
<div class="splitter"></div>
</div>
<script>
var h = ($(window).height()) - 20 +'px';
$('#content .splitter')
.css({ left: $('#content').width()/2 + 'px' })
.css({ height: h });
$('#content .leftpane')
.css({ width: $('#content').width()/2 + 'px' })
.css({ height: h });
$('#content .rightpane')
.css({ width: $('#content').width()/2-20 + 'px' })
.css({ height: h })
.css({ left: $('#content').width()/2+10 + 'px' });
$('.splitter').draggable({
axis: 'x',
containment: '#content',
distance: 0,
drag: function(event, ui) {
var width = $('#content').width();
$('#content .leftpane').css({ width: ui.position.left + 'px' });
$('#content .rightpane').css({
left: ui.position.left + 10 + 'px',
width: (width - ui.position.left + 1 -20) + 'px'
});
},
refreshPositions: true,
scroll: false
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment