1

Synopsis:

If you center a resizable element and expand it left/right, it has the illusion that it is only expanding half of the mouse movement.

Reason:

This happens because the object is centered.

Question:

How would you increase the rate that the object is being resized compared to the mouse movement? For centered elements, I'd like the object to expand twice the size of the mouse distance.

Community
  • 1
  • 1
vol7ron
  • 40,809
  • 21
  • 119
  • 172

2 Answers2

2

Given a centered DIV, the best I could think of would be to set the width in the callback.

     $('#divID').resizable({
            handles       : 'e,w'
          , resize        : function (event,ui){
                               ui.position.left = ui.originalPosition.left;
                               ui.size.width    = ( ui.size.width
                                                  - ui.originalSize.width )*2
                                                  + ui.originalSize.width;
                            }
     });

The above simply calculates the difference between the final and original width and multiplies that by two, then adds that to the original width.

I'm not sure this is the best way to do this. I, for one, don't like it since the width is being set twice on the object. I think the better way would be to accept some sort of (xRate or X-Step) and (yRate or Y-Step) option and include that in the _mouseDrag: portion of the jQuery function.

To do this w/o editing jQuery, I think I'd have to create a plugin that overwrites the resizable's _mouseDrag function.

I'll accept better answers! :)

vol7ron
  • 40,809
  • 21
  • 119
  • 172
2

I don't know how you center your resizable but this test case works well for me.

At it's heart I do something similar to vol7ron but I use one assignment less and the calculation is better readable :D just joking choose what you like better fits you more

ui.size.width += ui.size.width - ui.originalSize.width;
jitter
  • 53,475
  • 11
  • 111
  • 124
  • That's an interesting way to center it. I do it with the CSS `margin:0 auto;` – vol7ron Nov 15 '10 at 19:32
  • ? `margin:0 auto;` how is that supposed to work? Check e.g. http://www.jsfiddle.net/xhAU4/3/ where this completely fails. It's only centered horizontally and only before you resize. On resizing it jumps to center of the page instead of the container – jitter Nov 15 '10 at 19:42
  • I don't see how it completely fails. Centering horizontally is all that's needed. Resizable has a containment option if you want to keep it inside the container. I don't see how this fails otherwise. CSS is technically the more efficient way to horizontally align something. – vol7ron Nov 15 '10 at 23:13