Resize multiple areas with jQuery

Question

I've been asked to make an interface where multiple areas will need to be resized at once using jQuery. I've looked at jQuery resizable and can resize one area.

Now that I come to think of it I'm trying to do something similar to JS Bin with the way they resize their columns.

How is this possible? Also, it would be good if the snap points could adjust themselves to a bootstrap grid.

Answer 1

I dont know how you can do it with jQuery resizable but this is actually pretty easy stuff to do with a custom code. Here is a FIDDLE that i made with no trouble. Of course it's not 100% ready to go but with a little more work you can use it anyway you like.

The idea is you add a div with 0px width and 1px border as a seperator between your main divs. Define some global vars to check current mouse pos and mouse down/up operations and simply with mousemove reduce the size of divs at the left and rigth side of the seperator accordingly. Check the fiddle. I beleieve it's not too complicated. I can explain anything if you need.