Resizeable: resizing an item off-screen

Question

I am using jquery UI to resize elements. I have an element that needs to be resized to width, for example. 1200px or 1600px (as the user likes). But when there are elements before this (I ordered all the elements horizontally), the effect of resizing stops if the mouse cursor reaches the end of the screen.

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

The most correct field can be resized.

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

Answer 1

Perhaps you can just resize the body and scroll to allow constant 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 is the related script: http://jsfiddle.net/jeff_mccoy/UpmNq/2/

Note that you can speed this up a bit by only reducing the size of each X-pixel (! Diff% 3) as an example, but it will also be a bit jerky when resized.

Answer 2

It is best to place the resize knob on the left.