CODEWITHSUNDEEP
jquerycssjquery-ui
Sujith Kumar KS
Sujith Kumar KS

Reputation: 1043

Drag Re-sizable 2 column layout

I just tried to create a Drag re-sizable layout with jQuery ui

http://jsfiddle.net/3zLRJ/

But my actual aim was something like this

enter image description here

Is it possible to make it with jQuery Ui method ?, or any other plugins available

Upvotes: 7

Views: 4352

Answers (2)

saluce
saluce

Reputation: 13360

Set the handles property of the divs: http://jsfiddle.net/3zLRJ/5/

You'll need to add code to adjust both divs when one is being resized, though, through the resize event.

Another option is to create a third div between the two, make it a draggable, and constrain its motion to only go side to side. Then, adjust the divs around it on the drag event.

Upvotes: 1

Sven van Zoelen
Sven van Zoelen

Reputation: 7229

The plugin doesn't support it by default, so I made a start for you to achieve the goal. I just hard coded the div's into the function for the resize event, it's up to you to make it dynamic ;). 

var total_width = 500;

$("#div1").resizable({
    grid: [1, 10000]
}).bind( "resize", resize_other);


function resize_other(event, ui) {
    var width = $("#div1").width();

    if(width > total_width) {
        width = total_width;

        $('#div1').css('width', width);
    }

    $('#div2').css('width', (total_width - width));
}​

Fiddle example

Hope this helps!

Upvotes: 5

Related Questions