Looking for a way to make two divs share 100% of their parent's width, with a dynamic resizing feature in between them? Check out my solution here: http://jsfiddle.net/aRQ7a/
However, I'm facing an issue where when I decrease the size of the previous div, the alignment of the slider goes off. How can I resolve this? Below is my code:
CSS:
* {
margin: 0px;
padding: 0px;
}
div {
display: inline-flex;
height: 300px;
padding: 0px;
margin: 0px;
}
#part1 {
width: 47%;
background-color: red;
}
#part2 {
width: 47%;
background-color: green;
}
.divider {
width: 5%;
background-color: blue;
}
HTML:
<body>
<div id="part1"></div>
<div class="divider"></div>
<div id="part2"></div>
</body>
Javascript:
$(function () {
var p1 = parseInt($("#part1").css("width"));
var p2 = parseInt($("#part2").css("width"));
$(".divider").draggable({
axis: "x",
containment: "parent",
scroll: false,
start: function(){
p1 = parseInt($("#part1").css("width"));
p2 = parseInt($("#part2").css("width"));
},
drag: function (event, ui) {
var a = parseInt($(this).css("left"));
$(this).prev().css("width", p1 + a);
$(this).next().css("width", p2 - a);
}
});
});