I'm been working on some design elements of the site and recently ran into a bug in jQuery UI's Resizable plug-in that I found reported elsewhere, but never with a solution. Well I'm pleased to report that I found one, and it's pretty simple.

You will need to host your own copy of jquery-ui.js for this fix to work because we'll need to make a small edit to it.

The problem stems from the resizable function expecting an anchored left edge when dragging the right margin. If you do that the edge tracks the mouse and all is good. However, if you have the left and right margins set to auto then the left margin will move equally with the right which means the mouse will more twice as far as the right edge that you are dragging.

The simple solution is to make both edges move twice as fast as normal. For my purposes I switched the behavior completely to this because it's all I need, but for this to be integrated back with jQuery UI someone would need to add some detection to automatically determine when it is needed.

To make the change, start by searching for "jQuery UI Resizable" and scroll down to the "_mouseDrag" section. Then simply look for where the variable dx is defined and add a line following that multiplies it by 2.

And that's it. A very simple change, but one that will lead to much more intuitive behavior.