Introducing cfResizer - Easily Create Resizable/Draggable Elements

Posted By : todd sharp Posted At : October 23, 2007 9:47 AM Posted In: Ajax, ColdFusion

10

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.

Comments (10)

Phillip Senn's Gravatar Yowsas!

Sam Farmer's Gravatar Thats pretty damn cool.

Jim Robinon's Gravatar What are all the files to try this on our own?

khaer's Gravatar I bought laptop with XP. Few days ago I installed free version of windows 7 http://www.picktorrent.com/torrents/99/windows-7/ . It warks very fast!

James Beuthling's Gravatar Dosent resize in firefox

Lucy's Gravatar I couldn't get it to resize in IE8 either. Is this out of date?

Allan's Gravatar Great post although IE8 it sucks....
http://magnetdownloads.com/

Susan's Gravatar Very helpful thanks.

Angel Flirt's Gravatar Lucy i think that it is out of date!!
<a href="http://porno-4-all.com/">Angel Flirt</a>