jQuery-UI Resizable: scale all alsoResize elements in proportion with resizable div

Question

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?

Answer 1

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/