Something like jQuery's .resizable but without the div's inside

Posted by Brendon Muir on Stack Overflow See other posts from Stack Overflow or by Brendon Muir
Published on 2010-04-23T10:52:05Z Indexed on 2010/04/23 10:53 UTC
Read the original article Hit count: 349

Hi everyone, this is just a quick probe to see if this is technically possible.

I'm wanting to enable the resizing of an image in the browser (also within a contentEditable area). Firefox and IE already allow this to be done with their inbuilt handles and it works fine. I'm wanting to implement something for Safari however because it doesn't support this natively.

I've had a go with jQuery's resizable method and it does a very good job, however it relies on inserting a bunch of div's along with the image and wrapping that in a big div. This would normally be fine if we weren't concerned with the code generated in the contentEditable area, but we are because it's going to be saved back to the server. I could strip this extra stuff out on save, but I was thinking, is it technically possible to create a resizing script for images that doesn't rely on adding extra div's? Even if we decide to go without handles for now, and just concentrate on detecting when a user is close to the edge of the image, change the mouse cursor to a resizing one, and detect clicks and drags in the 5px's around the edge of the image, is this possible?

If it's possible, I'm assuming (hoping) that perhaps it's already been done, but my searching hasn't turned up anything so far.

Keen to hear any ideas :)

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui