Hoping someone can help me figure out how to do this. I have two div's which are set at 39% width and 59% width, with a small div between them set at 2% width. Below is a picture of what I have, the column 1 and column 2 are my two larger div's and the red one in the middle is the one set at 2%.
What I want to do, is have the user able to drag the red div in the picture above, and have it resize the two Column div's as it's moved. Move it to the right and Column 1 will get bigger, Column 2 will get smaller.
I'm wondering if I might be able to use jQuery UI's Draggable to do it, and then just as it's dragged determine the amount and alter the width's of the two column div's respectively. Or if there's a way to use Resize to do it, or perhaps a combination of both.
Ideally I would also like to limit them to a minimum of 10% width, so a max of 88%.
Any help you could provide I would appreciate. Thank you.
I'm trying to use the Menu widget from jQuery UI. I'm having an issue where the <ul> tags aren't being recognized as submenu's and it's just rendering them as normal <ul> lists. I've basically copied the code from the demo on the jquery UI website.