<cfsilence>

Introducing cfResizer - Easily Create Resizable/Draggable Elements

Posted At : October 23, 2007 10:47 AM | Posted By : todd sharp
Related Categories: cfResizer, ColdFusion, Ajax

I've been playing around over the last few days with the Ext.Resizable class and last night I decided to throw it together into a custom tag. Essentially this tag has the ability to take most (if not any) HTML tag and very easily make it resizable. When would you want to do this? Well the main reason I decided to look into it was for images. This functionality would be super cool as a compliment to my cfImageCropper custom tag for use in a CMS or other application that requires client side image manipulation (which could then be passed to the server for final manipulation with ColdFusion 8 - or third party - image manipulation packages).

The tag is not quite ready for prime time, but here's a sneak peek. Currently the attribute 'type' is used to tell the tag which HTML element should be created. I'm thinking of renaming that attribute to 'tag' or 'tagname' so that it better aligns with the built in cfdiv tag. Thoughts on this?

So here's how simple the tag is to use. See the Ext.Resizable docs above for the possible tag attributes and what they do. I believe my version implements every potential config var in the base class.

Want a resizable textarea?

<cf_resizer resizerName="taTest" wrap="true" pinned="true" preserveRatio="false" draggable="false" dynamic="true" type="textarea" style="cursor:text;">this is a test of the resizable textarea</cf_resizer>

A resizable image (which calls a JavaScript function of your choosing upon completion of the resize)?

<cf_resizer resizerName="imgTest" wrap="true" onresize="foo" draggable="true" pinned="true" handleImage="square.gif" preserveRatio="true" handles="all" type="img" src="autumnleaves.jpg" height="324" width="512"/>

A resizable/draggable div that resizes it's width in increments of 100px?

<cf_resizer resizerName="divTest" wrap="true" pinned="true" preserveRatio="false" widthIncrement="100" handles="all" draggable="true" dynamic="true" type="div" style="border: 2px red dashed; width:223px; height:233px;">
this is a resizable div...wooohooo!
</cf_resizer>

One thing to note - in addition to the custom tag attributes that still need to be fully documented (there are a few additional attributes above and beyond the Ext attributes) the tag will 'pass-through' any HTML attributes to the created HTML element (like 'src' for the 'img' implementation).

I still need to implement error checking/validation for the attributes and get some documentation together. Also the tag currently uses the Ext scripts which lie under /CFIDE - I'm thinking about an optional attribute that will allow you to pass a seperate path to the Ext scripts.

Here's a demo where you can see these in action.