1

I have two divs side by side. I'm using jquery ui to make them resizable. However, I'm having a problem because I'm trying to use the 'alsoResize' property to resize the div next to it.

If I resize the right side of my left div, then the left side of my right div should also resize accordingly.

Using 'alsoResize' alongside 'handles' doesnt work, and when I resize the right side of my left div, the right side of my right div also get resized.

Any suggestions on how to accomplish what I need to do?

jsfiddle:

https://jsfiddle.net/hh3ue3op/5/

dalvacoder
  • 455
  • 7
  • 18

1 Answers1

0

Check out the 'handles' parameter for jQuery UIs .resizable() function. http://api.jqueryui.com/resizable/

Here's a good example taken from this answer:

$( ".selector" ).resizable({ handles: "n, e, s, w" });

Updated jsfiddle

Community
  • 1
  • 1
Walker Boh
  • 750
  • 6
  • 13
  • I'm already using handles, problem is that 'alsoResize' apparently overrides handles. – dalvacoder Apr 20 '15 at 19:49
  • the problem with this solution is my divs are not parent > child, and if I were to make it so then the child would simply overlap the parent. I need both divs, side by side, resize according to one another. However because they both display content, one cannot overlap the other. – dalvacoder Apr 20 '15 at 20:03
  • I see. In that case, this answer seems to be what you're looking for. You'll have to modify the code a bit, but it appears to be doing what you want: http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse – Walker Boh Apr 20 '15 at 20:28
  • I looked into that answer, if you notice that it works fine north and south direction, however the resizing east and west does the opposite of what I need. I was messing with it to try to achieve what I need but so far havent figured it out – dalvacoder Apr 20 '15 at 20:30
  • Thanks! I guess that will work, wish I'd found something elegant for both but I'll just add to this for the up down behavior as well. Thanks for finding it! – dalvacoder Apr 20 '15 at 20:41
  • ugh its not working for me because my divs have position:absolute, got any suggestions to fix that? It seems to be taking width away from the right hand side of the right div. – dalvacoder Apr 20 '15 at 20:55
  • Don't position your divs that are being resized. Instead, wrap them in a container div and absolutely position the container. – Walker Boh Apr 20 '15 at 23:43