5

When you float an element to the right, then use jQuery UI's resizable widget to make it resizable from the left edge, weird things start happening.

I've put this together:

http://jsfiddle.net/nicholasstephan/kCduV/2/

If you resize the "sidebar", you'll see immediately what I'm talking about.

What am I doing wrong here?

I'd prefer to keep the float:right so the left column takes care of itself.

nicholas
  • 14,184
  • 22
  • 82
  • 138

1 Answers1

5

Working demo: http://jsfiddle.net/kCduV/10/ and another solution: http://jsfiddle.net/kCduV/12/

jQuery code:

$(function() {
    // $('.resizable').resizable({'handles': 'w'});
    $('.resizable').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;
        }
     });
});

​ OR

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

Explanation: jQuery Resizable: doubling the resize width

Tot Zam
  • 8,406
  • 10
  • 51
  • 76
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • makes sense. thanks! Both your fiddles still seem to the do the double transformation thing though. The right edge stays put, but the left edge moves more than the mouse. Using the resize event to modify the sidebar itself is still a better than using event to manipulate the left element's width. Thanks! – nicholas Mar 24 '12 at 21:52
  • No worries man! Glad it helped you, yep you can try and play around with the ui.position, cheers! – Tats_innit Mar 25 '12 at 00:57