CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-resizable
nicholas
nicholas

Reputation: 14593

jquery ui resizable a floating element.

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.

Upvotes: 5

Views: 3078

Answers (1)

Tats_innit
Tats_innit

Reputation: 34107

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

Upvotes: 5

Related Questions