CODEWITHSUNDEEP
jqueryjquery-ui
wtk13
wtk13

Reputation: 397

jQuery UI - resizable. Check direction

I would like to ask how to check direction of resizable element in jQuery UI - resizable. I know I can check it horizontally:

$(this).data(ui-resizable).axis

I would like to know that I resize it to left or to right.

Upvotes: 2

Views: 879

Answers (1)

ggzone
ggzone

Reputation: 3711

It seems theres no event to deal with that. I set up a working fiddle: http://jsfiddle.net/wxrm7w23/

window.resizeWidth = 0;
$(function () {
    $("#resizable").resizable({
        containment: "#container",
        resize: function (event, ui) {
            var currentWidth = ui.size.width;
            var direction = (currentWidth > window.resizeWidth) ? 'right' : 'left';
            window.resizeWidth = ui.size.width;
            $('.d #direction').text(direction);
        }
    });
});

The "magic" is pretty easy. I check the width twice inside the resize event and save it to a global var. So you have both numbers to compare with: the current width of the box and the width before the next resize event.

Upvotes: 1

Related Questions