Question

I have setup a div that is resizable:

$("mydiv").resizable();

Now when you go to resize it to the right the cursor goes off the the actual resize part. So if the cursor hits the side of the screen you have to let go of the mouse and go back and start resizing it again if you want to make it bigger. I know that with the draggable’s there is an option for cursorAt that will tell the cursor to stay on that div. I looked at jquery ui.com but didnt see a cursorAt for the resizable. Is there a way to keep the mouse cursor on the resizable part while resizing?

Answer 1

Ah I see, the culprit seems to be what you pointed out:

“It is because the other div that I am resizing has the property margin:0 auto“

Having 0 auto means the left, right margin is automatically adjusted to balance out which will centralise the div element. I do not think you want to resize in that manner as the position of the div moves while you are resizing in order to stay centered.

My suggestion, remove the auto setting for your margin.

Update:
I ran this in firebug at the resizble demo page:
$("#resizable").css("margin","0 auto"); to center the box using auto margin

Here’s a screenshot of what I’ve got:

The resizing cursor moved away from the box’s corner the more you drag away from the orginal size.

However it still work though the ‘experience’ feels odd.