I am currently working on creating a dynamic three-column layout that allows users to resize the columns in their browser. Using jQuery for column resizing, I have successfully adjusted the first two columns but am encountering difficulties with the final column.
As users drag the mouse left, the columns should adjust to the right. Any assistance in solving this issue would be greatly appreciated! Below is the jQuery code I am using and here is the corresponding jsFiddle link: http://jsfiddle.net/cleverdirt/hsaL9/
$(document).ready(function(){
$(".first").on("mousedown", function(e){
mousedownFirst = true;
});
$(".second").on("mousedown", function(e){
mousedownSecond = true;
});
$(".container").on("mouseup", function(e){
mousedownFirst = false;
mousedownSecond = false;
});
$(".container").on("mousemove", function(e){
var offset = $(this).offset().left;
if(mousedownFirst){
$(".left").css("width", e.pageX - offset);
$(".middle").css("left", e.pageX - offset);
}
if(mousedownSecond){
$(".right").css("width", e.pageX - offset);
$(".middle").css("right", e.pageX - offset);
}
});
});