Question

What’s the best way of constantly resizing elements using clicking and holding a resize image in the bottom-right corner of the element? Is there a specific empty element that has resizing built in or a style to use that would be better than using a while loop in JavaScript?

Answer 1

The general approach goes something like this:

• When onmousedown fires on the resize target, start tracking onmousemove
• When onmousemove fires, resize the element
• When onmouseup fires, clear the onmousemove handler

So basically you just respond to events, there are no while loops or anything involved.

It can be somewhat tricky to accomplish so that it works nicely, so I would suggest seeing if there’s a JS library you could use. A pretty simple way to get this behavior would be to use jQuery UI’s resizable component