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.
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.