Using jQuery UI Resizable with margin: auto

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.


j/k selects the next/previous item in the list
n/p in title view, selects the next item without opening it
space/shift+space moves to the next/previous page
shift+m open/close the main menu
shift+o open/close the options menu
enter select the highlight entry from a menu


enter,o in title view, expands or collapses the selected item
shift+a marks all items in the current page as read
d go to the item's list of similar stories
i/u designate the item as interesting/not interesting
m marks the item as read or unread
s adds or removes a star from the selected item
shift+s open/close the item's share menu
shift+u marks all items in the current page as unread
v opens the original source for the item in a new tab

Go To a New Page

g then h go to the homepage
g then i go to the Interesting items view
g then a go to the All items view
g then s go to the Saved items view
g then p go to the Popular items view
g then f go to the Select a Feed page


- decrease the font size
= increase the font size
esc close any menu if open, otherwise deselect all items
? open/close a decription of keyboard shortcuts