jQuery + ColdFusion 8 = Erotic And Magnetic Poetry : Kinky Solutions : A Student's Perspective by Ben Nadel

jQuery + ColdFusion 8 = Erotic And Magnetic Poetry

Posted August 31, 2007 at 8:08 AM

I just opened a ColdFusion 8 account at HostMySite.com and I'm already having fun playing around with all the new features of ColdFusion 8. Yesterday, I put up a demo that combines the unbelievable simplicity of jQuery with the image manipulation power of ColdFusion 8 to create a drag-and-drop magnetic poetry system; you know, like the kind you see on the refrigerator doors in college dorm rooms and young adult apartments. Using jQuery, the user can add images to the "Canvas". Then, using the a jQuery plugin (Interface), the user can drag and drop the magnetic pieces around on the Canvas. Once the positioning is done, the image data is submitted to the server where ColdFusion 8 will compile all the pieces into one PNG image that is streamed to the browser.

Lots of fun to be had. Try it out for your self here:

jQuery + ColdFusion 8 = Erotic And Magnetic Poetry Online Demo

The system was actually quite simple to build and consists of only two ColdFusion templates and some jQuery files. The hardest part of the system was building the images used for the actual magnetic pieces. One day, I might be able to build the magnetic images using ColdFusion 8, but I doubt the server has my web site font.

The first ColdFusion 8 page displays the canvas and uses jQuery to manipulate the magnetic pieces:

Launch code in new window » Download code as text file »

<cfsilent>
<cfdirectory
action="list"
directory="#ExpandPath( './words/' )#"
type="file"
listinfo="name"
sort="name ASC"
name="qWord"
/>
<!---
Loop over words to get rid of file extensions.
We are going to be using these values to create the
word list and we don't need the file extensions
(we are going to assume they are all GIF images).
--->
<cfloop query="qWord">
<cfset qWord[ "name" ][ qWord.CurrentRow ] = ListFirst(
qWord.name,
"."
) />
</cfloop>
</cfsilent>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Magnetic Poetry With ColdFusion 8 And jQuery</title>
<style type="text/css">
body,
html {
background-color: #FFFFFF ;
font: 11px verdana ;
margin: 0px 0px 0px 0px ;
padding: 0px 0px 0px 0px ;
}
div#canvas {
border: 1px solid #999999 ;
height: 600px ;
left: 10px ;
overflow: hidden ;
position: absolute ;
top: 10px ;
width: 800px ;
}
div#wordlist {
border: 1px solid #999999 ;
height: 600px ;
left: 815px ;
overflow: auto ;
position: absolute ;
top: 10px ;
width: 200px ;
}
div#wordlist a {
background-color: #F0F0F0 ;
cursor: pointer ;
display: block ;
line-height: 20px ;
margin: 0px 0px 1px 0px ;
text-align: center ;
}
div#wordlist a:hover {
background-color: #FFFFFF ;
}
div.magnet {
position: absolute ;
z-index: 100 ;
}
div.magnet img {
display: block ;
position: relative ;
}
form {
height: 30px ;
left: 10px ;
margin: 0px 0px 0px 0px ;
position: absolute ;
top: 615px ;
width: 802px ;
}
button {
background-color: #FAFAFA ;
border: 1px solid #999999 ;
display: block ;
font-size: 18px ;
height: 30px ;
margin: 0px auto 0px auto ;
width: 800px ;
}
textarea {
display: none ;
}
</style>
<script
type="text/javascript"
src="./jquery-1.1.4.pack.js">
</script>
<script
type="text/javascript"
src="./interface.drag-drop.js">
</script>
<script type="text/javascript">
// Define all the words that are available.
var arrWords = (
<cfoutput>
"#ValueList( qWord.name, "|" )#"
</cfoutput>
).split( "|" );
// When a user clicks on the word link, this initiates
// the magnetic adding function (will not fully execute
// until the image has loaded).
function AddWord( jCanvas, jLink ){
var jMagnet = null;
var jImg = null;
// Create the magnet DIV.
jMagnet = $( "<div>" ).addClass( "magnet" );
// Set the image value.
jMagnet.attr( "image", jLink.text() );
// Create the image.
jImg = $( "<img>" );
// Set the load function for the img.
jImg.load(
function(){
var jImg = $( this );
var jDiv = $( this.parentNode );
// Set the position.
jDiv.css( "top", "30px" );
jDiv.css( "left", "30px" );
// Set the Div width height.
jDiv.width( jImg.width() );
jDiv.height( jImg.height() );
// Make the magnet draggable.
jDiv.Draggable(
{
zIndex: 1000,
ghosting: true,
opacity: 0.7
}
);
}
);
// Append the image to the div.
jMagnet.append( jImg );
// Set the image source.
jImg.attr(
"src",
("words/" + jLink.text() + ".gif")
);
// Add the magnet to the canvas.
jCanvas.append( jMagnet );
// Return out.
return;
}
// This will store the image data into the form and then
// submit the form to the page that generates the image
// using ColdFusion 8 image functionality.
function GenerateImage( jForm, jCanvas ){
var jData = $( "textarea#data" );
var strData = "";
var jMagnet = jCanvas.find( "div.magnet" );
// Loop over the magnets to build the data
// string.
jMagnet.each(
function( intI ){
var jDiv = $( this );
// Append list data for image.
strData += (
jDiv.attr( "image" ) + ":" +
parseInt( jDiv.css( "top" ) ) + ":" +
parseInt( jDiv.css( "left" ) ) + ","
);
}
);
// Store the data value in the form.
jData.val( strData );
// Submit the form.
jForm.submit();
}
// This prepares the document once the body has
// finished loading and the DOM is ready for
// interaction.
$(
function(){
var jCanvas = $( "div#canvas" );
var jList = $( "div#wordlist" );
var jForm = $( "form" );
var jWord = null;
// Loop over all the words.
for (
var intWord = 0 ;
intWord < arrWords.length ;
intWord++
){
// Create a link for the word.
jWord = $(
"<a>" +
arrWords[ intWord ] +
"</a>"
);
// Bind the onclick action.
jWord.click(
function(){
AddWord( jCanvas, $( this ) );
}
);
// Add the link to the word list.
jList.append( jWord );
}
// Set up the form so that we have control
// over the submission procress.
jForm.find( "button" ).click(
function(){
GenerateImage( jForm, jCanvas )
}
);
}
);
</script>
</head>
<body>
<div id="canvas"></div>
<div id="wordlist"></div>
<form action="generate.cfm" method="post" target="_blank">
<button type="button">
Generate Image Using ColdFusion 8 »
</button>
<textarea name="data" id="data">Blam</textarea>
</form>
</body>
</html>

The only ColdFusion 8 specific code on the main page is the fact that the ColdFusion CFDirectory tag is using the ListInfo and Type attributes to make sure that we get only the name values of files in the graphics directory. Other than that, jQuery is really what dominates this page. This works seamlessly on FireFox, but in IE, there is some weird ghosting issues on the drag-and-drop feature. Also, it took me a good amount of time to figure out that ghosting would NOT work if the DIV had an explicit "display: block" style (who knows why?!?).

Once you are done dragging your images around, clicking on the "Generate Image Using ColdFusion 8" button will grab the image data (including positions on the canvas) using jQuery, store it in the Form, and then submit it to another ColdFusion template, generate.cfm. This ColdFusion page then reads in all the images into ColdFusion 8 image objects and pastes them onto a blank canvas. Once all the images are done, I am then just writing the image to the browser.

Launch code in new window » Download code as text file »

<cfsilent>
<cfparam
name="FORM.data"
type="string"
default=""
/>
<cfset imgCanvas = ImageNew(
"",
800,
600,
"rgb",
"FFFFFF"
) />
<!---
Loop over the form data as a comma
delimited list of magnets data-lists.
--->
<cfloop
index="lstMagnetData"
list="#FORM.data#"
delimiters=",">
<cfset arrParts = ListToArray( lstMagnetData, ":" ) />
<cfif (ArrayLen( arrParts ) EQ 3)>
<cfimage
action="read"
source="./words/#arrParts[ 1 ]#.gif"
name="imgWord"
/>
<!---
Paste the word image into the canvas using the
passed in top/left coordinates.
--->
<cfset ImagePaste(
imgCanvas,
imgWord,
arrParts[ 3 ],
arrParts[ 2 ]
) />
</cfif>
</cfloop>
<!---
ASSERT: At this point, we have pasted in all the
magnetic words onto the canvas.
--->
</cfsilent>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery And ColdFusion 8 - Magnetic Poetry</title>
<style type="text/css">
body {
background-color: #F0F0F0 ;
}
img {
border: 1px solid #666666 ;
display: block ;
margin: 30px auto 0px auto ;
}
</style>
</head>
<body>
<cfimage
action="writetobrowser"
source="#imgCanvas#"
format="png"
/>
</body>
</html>

This whole thing was really easy to put together. I can already see how amazingly powerful all the new features of ColdFusion 8 are going to be. A few months ago, I would have never been able to do something like this. If I even attempted it, I would have had to build a Flash movie or something that somehow exported to an image. It would have been a pain in the butt. Now, with ColdFusion 8, doing this sort of image manipulation took a white-space-heavy 100 lines of code.

ColdFusion 8 is mad sexy!

Download Code Snippet ZIP File

HostMySite.com Customer Care Rocks

Ask Ben: Handling Redirects With ColdFusion CFHttp

ColdFusion Jobs - Find or Post A ColdFusion Job Through DeveloperCircuit.com

Reader Comments

cfyeahbaby, next cforalsex. and soon cfvirtualwomen. go cf8 go.

Posted by I Rz on Aug 31, 2007 at 9:31 AM

Man, you just got too much time on your hands, he he. Neat example though.

Posted by Boyan on Aug 31, 2007 at 9:41 AM

Move over Ben Forta, CF8 has a new 'pimp' in town. ;P Anyway, I concur... you have too much time on your hands. :)

Posted by Todd Rafferty on Aug 31, 2007 at 9:48 AM

Hey, better in front of a computer than out in a gang, right?

Posted by Ben Nadel on Aug 31, 2007 at 9:56 AM

Ben...

You should be able to upload your own font and specify that to be used. Great example but...sometimes your mother and I worry about you.

Posted by Andy Matthews on Aug 31, 2007 at 10:21 AM

@Andy,

I don't have that kind of access to the server :( But regardless, I should try to work some kind of magic with whatever font they have, just so I can get the algorithm down.

And don't worry about me - I don't plan to even use a computer this weekend :)

Posted by Ben Nadel on Aug 31, 2007 at 10:28 AM

You can't even upload a font? With Image.cfc, you simply upload a font to any directory for which you have permissions, then pass in the path to the font. Couldn't be easier.

Posted by Andy Matthews on Aug 31, 2007 at 10:47 AM

@Andy,

I think the font needs to be the system folder? To be honest, I am not sure how exactly the fonts are read in for ColdFusion. If it has anything to do with the install of system files or CF Admin, I don't have access to that stuff.

Posted by Ben Nadel on Aug 31, 2007 at 11:14 AM

how do you delete a word once you put it up there? heaven forbid you should make a mistake in your composition, but still...

Posted by michael white on Aug 31, 2007 at 12:53 PM

@Michael,

Good question. I just drag it off the canvas. It is still "there", but it just won't show. I was trying to figure out how to do that. I might add a Key Capture feature (for delete) or maybe make a "Hot Area" for drag and drop delete (ie. Drop over bottom right corner to delete).

Posted by Ben Nadel on Aug 31, 2007 at 1:00 PM

For fonts you can copy them on the server at any place and if you have access to administrator, you can add them through font management.

The fonts that you add are considered as user fonts and should get preference over system fonts.The only difference I think is that they will not be a part of any fall back algo.

Posted by ck on Sep 3, 2007 at 4:53 AM

@CK,

When you say:

copy them on the server at any place

.. What do you mean? Copy them where? Do you mean I can reference the fonts from any folder?

Posted by Ben Nadel on Sep 4, 2007 at 7:24 AM

By the way, ecstacy is spelt "ecstasy"

Posted by Mark CE on Sep 20, 2007 at 4:52 AM

Yeah, spelling is certainly not my strong point :) Thanks for pointing that out.

Posted by Ben Nadel on Sep 20, 2007 at 7:14 AM

Althought,i can not understand some parts of the article,thanks for sharing.

Posted by Avery on Jan 9, 2008 at 3:47 AM

Where to download the interface jquery files needed for this to work?

Posted by abi on Apr 23, 2008 at 2:27 PM

@Abi,

Try http://www.jquery.com.

Posted by Ben Nadel on Apr 23, 2008 at 2:48 PM

I was able to download jquery-1.2.3.min.js from there but this example seems to be using two different js files. (jquery-1.1.4.pack.js, interface.drag-drop.js) & i couldn't find any downloadable links for these two?

Posted by abi on Apr 23, 2008 at 3:16 PM

@Abi,

You can just grab the ones from my demo if you want:

http://www.cf8testing.com/demo/magnetic_poetry/jquery-1.1.4.pack.js

http://www.cf8testing.com/demo/magnetic_poetry/interface.drag-drop.js

Enjoy.

Posted by Ben Nadel on Apr 23, 2008 at 3:25 PM

Post Comment | Ask Ben

jQuery + ColdFusion 8 = Erotic And Magnetic Poetry : Kinky Solutions : A Student's Perspective by Ben Nadel