Calculate dragable divs - jquery

Question

I have two divs on the page, wich represent two columns. Both are floating left, have 49% width and padding-right for 0.5%. In each columns there are various divs positioned vertical down. Now I want to make a function, which will allows user to resize each div in column, or if this isn't achieveable, a function which will allow user to resize each column.

I have managed to make one div in column resizable ( $('#divid').resizable(); ), but I want to modify script, so auto calculation is on.

To explain. If user resize right columnn for xx%, I want that left column reduce size for xx%

How to manage this?

Thanks guys!

Answer 1

Take a look at the jQuery UI Resizable element.

Answer 2

The jQuery resizable thingy lets you specify a stop callback. I would imagine that the easiest thing to do, would be to write a callback that determines the pixel size of the element, and figures out the relative size and then sets that on the element.

Doing this is going to require knowing which element the width or height would be proportional to, which might not be trivial to determine automatically. You might need to make sure that it is a particular element in your HTML; maybe add a specific containing div for this purpose.