9

I have a resizable div which is positioned over a selection of elements which have been set to alsoResize.

Visually, the resizable element is a bounding box for the alsoResize elements.

I want to be able to resize the alsoResize elements in proportion of the resizable div. UI's default behaviour makes each element have a fixed left and top position when resizing:

http://jsfiddle.net/digitaloutback/SrPhA/2/

But I want to adjust the left and top of each AR element to scale with the bounding box as it's resized.

I first thought this wouldn't be too much hassle by altering the alsoResize plugin. This is what I added to the resize: _alsoResize:

// Get the multipliers
var scaleX = self.size.width / os.width;
var scaleY = self.size.height / os.height;

newElW = ( parseInt(el.css('width')) * scaleX );
newElH = ( parseInt(el.css('height')) * scaleY );
newElL = ( parseInt(el.css('left')) * scaleX );
newElT = ( parseInt(el.css('top')) * scaleY );

el.css({ width: newElW, height: newElH, left: newElL, top: newElT });

As you'll see, the boxes lag somewhat:

http://jsfiddle.net/digitaloutback/SrPhA/4/

Something seems to be ballooning the figures and can't quite figure it out, any suggestions appreciated. Possibly discrepancy of decimal places between scripts & browser?

3 Answers 3

6
+50

Maybe you need to rethink the structure..

You could insert the .lyr elements inside the .resizer element and position them inside it with percentage positions .. this way they will automatically resize while their container is changing size. (the plugin does not have to handle them)

demo at http://jsfiddle.net/SrPhA/65/


Update after comment

To de-couple the resizer from the alsoResize elements you will need to take a couple of things into consideration for the calculations.

  • Firstly, you need to use the starting dimensions/positions and not the current of the elements, so use start.width .height etc..
  • for the positioning you need to translate the element to the origin (in regards to distance from the resizer) scale the left/top and then re-translate back to where they were..

the final calculations become

newElW = start.width * scaleX;
newElH = start.height * scaleY;
newElL = ((start.left - op.left) * scaleX) + op.left;
newElT = ((start.top  - op.top ) * scaleY) + op.top ;

It needs some more tinkering to handle the case were you scale the elements by dragging the top or left side of the resizer..

demo at http://jsfiddle.net/gaby/SrPhA/171/


Latest Update

to handle scaling in all directions use these helpers..

utils: {
        west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left},
        east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;},
        south: function(start, op, scale, delta){return ((start.top  - op.top ) * scale) + op.top; },
        north: function(start, op, scale, delta){return ((start.top  - op.top ) * scale) + op.top + delta.top; }
    }

Working example with all updates at http://jsfiddle.net/gaby/SrPhA/324/

6
  • I did consider this option and although still not out of the question, it would mean losing a lot of ground. In addition I'll be asking a lot more out of the script. The 'marquee' will need to wrap around any number of objects in realtime so that's a lot of wrapping and unwrapping which isn't currently there. Will test nonetheless so thanks for the input.
    – digout
    Nov 10, 2011 at 12:38
  • That is a big improvement Gaby. However the dimensions are still bloating somewhere - try dragging the marquee in and out a few times and the marquee starts pulling away from the inner elements. This may be a discrepancy when rounding the pixels, do you think?
    – digout
    Nov 10, 2011 at 22:21
  • In fact, the inaccuracy occurs whenever you release and re-click a handle.
    – digout
    Nov 12, 2011 at 23:51
  • @Will, a slight improvement might be to store and use the precise calculations after the first move, instead of re-starting from the integer values returned from the css/positioning.. so check jsfiddle.net/gaby/SrPhA/313 Nov 18, 2011 at 1:20
  • I'm happy with the accuracy of this, I am now trying to make the inner elements resize when using the other handles. Here is what I have so far, starting with SW and W handles. I must be nearly there... jsfiddle.net/digitaloutback/SrPhA/322
    – digout
    Nov 22, 2011 at 20:47
0

Did you mean to use + instead of *?

newElW = (parseInt(el.css('width')) + scaleX);
newElH = (parseInt(el.css('height')) + scaleY);
newElL = (parseInt(el.css('left')) + scaleX);
newElT = (parseInt(el.css('top')) + scaleY);
1
  • No - they are multipliers, effectively adding a percentage.
    – digout
    Nov 10, 2011 at 12:16
0

I had a little luck by setting the margin-top and margin-left for positioning and leaving the 'top' and 'left' attributes at default for animation.

http://jsfiddle.net/SrPhA/97/

1
  • Not quite what I was after as the 'inner' elements are still fixed.
    – digout
    Nov 10, 2011 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.