Question

I’m using jquery UI to resize elements.
I have an element that should be resizeable up to a width of e.g. 1200px or 1600px (as the user likes). But when there are elements before this one (i arranged all elements horizontally) , the resize action stops if the mouse cursor reachs the end of the screen.

You can test it here: http://gopeter.de/clients/dustin/

The very right box is resizeable.

Does anyone have any ideas how i can prevent this?
Should i check the cursor position and extend the element when the end is reached? Or are there any other techniques?

Answer 1

Maybe you could just resize the body and scroll to allow continous resizing:

var body = $('body');

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = body.width(),
            diff = width - (width - (this.offsetLeft + this.offsetWidth));

        body.width(diff).scrollLeft(diff);
    }
});

or (less jQuery)

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = document.body.clientWidth,
            diff = width - (width - (this.offsetLeft + this.offsetWidth));
        document.body.style.width = diff + 'px';
        document.body.scrollLeft = diff;
    }
});

Here’s the related fiddle: http://jsfiddle.net/jeff_mccoy/UpmNq/2/

Note you could speed this up a little by only resizing every X number of pixels (!diff % 3) as an example but it would also be a little jerky on resize.