Skip to content

Instantly share code, notes, and snippets.

@rui-ferreira
Created January 22, 2014 16:38
Show Gist options
  • Save rui-ferreira/8562100 to your computer and use it in GitHub Desktop.
Save rui-ferreira/8562100 to your computer and use it in GitHub Desktop.
An horizontal div splitter using jQuery UI resizable and Touch Punch (http://touchpunch.furf.com/) to make it work on mobile.
.wrap {
width: 100%;
border: 1px brown solid;
font-size: 30px;
}
.resizable {
width: 50%;
height: 120px;
padding: 0px;
background-color: coral;
display: inline-block;
float:left;
}
.content{
padding-left: 5px;
height: 120px;
overflow: auto;
}
.resizable2 .content {
padding-left: 15px;
}
.resizable2 {
background-color: lightblue;
}
.ui-resizable-e {
cursor: ew-resize;
width: 10px;
right: -10px;
top: 0;
bottom: 0;
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="resizable resizable1"><div class="content">Lorem ipsum dolor sit amet</div></div>
<div class="resizable resizable2"><div class="content">Whatever bla bla bla</div></div>
</div>
</body>
</html>
var minWidth = 100;
$(".resizable1").resizable({
autoHide: false,
handles: 'e',
minWidth: minWidth,
resize: function(e, ui){
var parentWidth = ui.element.parent().width();
var remainingSpace = parentWidth - ui.element.outerWidth();
if(remainingSpace < minWidth){
ui.element.width((parentWidth - minWidth)/parentWidth*100+"%");
remainingSpace = minWidth;
}
var divTwo = ui.element.next(),
divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parentWidth*100+"%";
divTwo.width(divTwoWidth);
},
stop: function(e, ui){
var parentWidth = ui.element.parent().width();
ui.element.css({
width: ui.element.width()/parentWidth*100+"%"
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment