The smallest “resizable” implementation there is

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:

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!