I needed an element on a page to be resizable by the user. jQuery UI comes with a “resizable” implementation that, triggered on an element, will add a handler to it so that the user can resize by dragging and dropping. Other tools also exist.
However, the code I am writing does not depend on any major JS library. Just pulling in for example an additional 120KB (minified jQuery + minified & minimal jQuery UI) for this feature not to speak of adding even more dependencies was out of the question.
So here is a simple example to build on top of the CSS3 resize property.
First we enable the native resize handling by setting the appropriate CSS. Then we setup a listener for the onmouseup event that signals a possible drag & drop:
Demo is here http://jsfiddle.net/35ty2/3/.
Based on http://jsfiddle.net/zFVyv/10/ I tried to work with the newer interfaces there are, however Chrome does not trigger correctly in connection with the resize property. The current solution has a benefit of only triggering once resizing is finished. Happy resizing!