Server Time:
Monday May 12 2008 06:42 AM  		 Your Time:
  
HostMySite.Com is sponsoring this tutorial, please visit their site today!
This tutorial is sponsored by HostMySite.Com - ColdFusion Hosting

Color Picker
 by: Mark Aplet 		Email this tutorial to a friend Display Printer Friendly Format
[Download in PDF Format] [Download in FlashPaper Format]

At one point or another, while developing a backend admin section, the client will ask for the ability to change the color of something. Be it text, backgrounds, or you just want to add this ability to your next project, this tutorial will demonstrate an easy way to create a dynamic color picker, that when a color is picked, it will automaticly insert that value into the desired form field. See demo here.

Before we begin, you will need to download thetransperent gif  below.

For this tutorial we will only need two CFM files. One file will contain the form elements, and the other will be the pop-up color picker. Below is the code for the form.cfm

FORM.CFM

<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<cfparam name="ColorValue" default="##000000">
<form name="EditColors">
<input type="text" name="ColorValue" value="<cfoutput>#ColorValue#</cfoutput>" size="15">
<A href="#" onclick="Javascript: window.open('colors.cfm?Formfield=EditColors.ColorValue','DefColor','width=324,height=340,
location=No,menubar=No,scrollbars=no,status=no,toolbar=No,resizable=yes');">Change Color</A>
</form>
</body>
</html>

The main thing to be awaer of here is in the javascript function. I bolded the the important area above.

FORMFIELD= Whatever your form is called. VERY IMPORTANT. if theses fields are not the same, it will not work.

.ColorValue This is the field you want to target. You can have several of these color pickers on your page but this field needs to be unique to the form field you are wanting to change.

<CFPARAM name="show" default="Other">
<CFIF SHOW IS "close">
<CFSET color = URL.Color>
<CFOUTPUT>
<SCRIPT language="JavaScript1.2" type="text/javascript">parent.opener.document.#Formfield#.value = '###color#'
parent.window.close()
</SCRIPT>
</CFOUTPUT>
<CFELSE>
<CFSETTING ENABLECFOUTPUTONLY="Yes">

<!--- It's worth moting here. The color values you see below are on different lines for visual refrence only.
when you place it in your template remove all breaks or it will cause some colors to shift --->

<CFSET TheColors = "000000,111111,222222,333333,444444,555555,666666,
777777,888888,999999,AAAAAA,BBBBBB,CCCCCC,DDDDDD,
EEEEEE,FFFFFF,110000,110055,1100AA,1100FF,115500,115555,1155AA,
1155FF,11AA00,11AA55,11AAAA,11AAFF,11FF00,11FF55,11FFAA,
11FFFF,220000,220055,2200AA,2200FF,225500,225555,2255AA,2255FF,
22AA00,22AA55,22AAAA,22AAFF,22FF00,22FF55,22FFAA,22FFFF,
330000,330055,3300AA,3300FF,335500,335555,3355AA,3355FF,33AA00,
33AA55,33AAAA,33AAFF,33FF00,33FF55,33FFAA,33FFFF,440000,
440055,4400AA,4400FF,445500,445555,4455AA,4455FF,44AA00,44AA55,
44AAAA,44AAFF,44FF00,44FF55,44FFAA,44FFFF,550000,550055,
5500AA,5500FF,555500,555555,5555AA,5555FF,55AA00,55AA55,55AAAA,
55AAFF,55FF00,55FF55,55FFAA,55FFFF,660000,660055,6600AA,
6600FF,665500,665555,6655AA,6655FF,66AA00,66AA55,66AAAA,66AAFF,
66FF00,66FF55,66FFAA,66FFFF,770000,770055,7700AA,7700FF,
775500,775555,7755AA,7755FF,77AA00,77AA55,77AAAA,77AAFF,77FF00,
77FF55,77FFAA,77FFFF,880000,880055,8800AA,8800FF,885500,
885555,8855AA,8855FF,88AA00,88AA55,88AAAA,88AAFF,88FF00,88FF55,
88FFAA,88FFFF,990000,990055,9900AA,9900FF,995500,995555,
9955AA,9955FF,99AA00,99AA55,99AAAA,99AAFF,99FF00,99FF55,99FFAA,
99FFFF,AA0000,AA0055,AA00AA,AA00FF,AA5500,AA5555,
AA55AA,AA55FF,AAAA00,AAAA55,AAAAAA,AAAAFF,AAFF00,AAFF55,AAFFAA,
AAFFFF,BB0000,BB0055,BB00AA,BB00FF,BB5500,
BB5555,BB55AA,BB55FF,BBAA00,BBAA55,BBAAAA,BBAAFF,BBFF00,BBFF55,
BBFFAA,BBFFFF,CC0000,CC0055,CC00AA,CC00FF,
CC5500,CC5555,CC55AA,CC55FF,CCAA00,CCAA55,CCAAAA,CCAAFF,CCFF00,
CCFF55,CCFFAA,CCFFFF,DD0000,DD0055,DD00AA,
DD00FF,DD5500,DD5555,DD55AA,DD55FF,DDAA00,DDAA55,DDAAAA,DDAAFF,
DDFF00,DDFF55,DDFFAA,DDFFFF,EE0000,EE0055,
EE00AA,EE00FF,EE5500,EE5555,EE55AA,EE55FF,EEAA00,EEAA55,EEAAAA,
EEAAFF,EEFF00,EEFF55,EEFFAA,EEFFFF,F00000,F00055,
F000AA,F000FF,F05500,F05555,F055AA,F055FF,F0AA00,F0AA55,F0AAAA,
F0AAFF,F0FF00,F0FF55,F0FFAA,F0FFFF">

<CFSET TheCount = 0>
<CFSETTING ENABLECFOUTPUTONLY="No">


<cfoutput>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor="##FFFFFF" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<TABLE width="100" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD bgcolor="##OOOOOO">
<TABLE width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<TR>
<TD colspan="16" align="center" bgcolor="##BBBBBB"><font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="2"><strong>Click the swatch you would like to use.</strong></font></TD>
</TR>

<!--- Loop over color values and dyanmicly create links and HEX color values --->
<CFLOOP from="1" to="#ListLen(TheColors)#" index="ThisColor"><CFIF TheCount EQ 0><TR></CFIF>
<TD bgcolor="#ListGetAt(TheColors,ThisColor)#" height="18" width="18"><A href="colors.cfm?show=close&Formfield=#URL.Formfield#&Color=#ListGetAt(TheColors,ThisColor)#">
<IMG src="transperent.gif" width="18" height="18" alt="#ListGetAt(TheColors,ThisColor)#" border="0"></A>
</TD>
<CFIF TheCount EQ 15>
</TR><CFSET TheCount = 0><CFELSE><CFSET TheCount = TheCount + 1></CFIF></CFLOOP>
</table>
</td>
</tr>
</table>
</cfoutput>
</CFIF>
</body>
</html>

Thats it. Just go to form.cfm, and test it out.

The following download is associated with this tutorial: Download all the code here.


Date added: Sat. July 12, 2003
Posted by: Mark Aplet | Views: 10846 | Tested Platforms: CF4,CF5,CFMX | Difficulty: Intermediate
 Categories Listed: Other

HostMySite.Com is sponsoring this tutorial, please visit their site today!
This tutorial is sponsored by HostMySite.Com - ColdFusion Hosting

This author's other tutorials:
Banning the spam
Internet spam is on the rise, and more importantly spammers are targeting your sites comment forms. They are looking for the trackback urls to fool search engines into ranking their website higher in the search results. When this started to happen to me, I wanted to sent out emails to the offenders demanding that they stop. Unfortunatly the spam is being generated by bots and programs not some pimple faced kid behind a keyboard. Banning IP addresses is not enough and rarely works since intelligent spammers hide their true identity anyway. Next approach... Banning Keywords used by the offending sites. Thats where this tutorial comes in. - Date added: Wed. March 15, 2006
 Improving Application Performance
One thing I am always trying to do is speed up my applications. As my site grows in size and complexity I find that I spend a fair amount of time re-coding pages because of a new technique I just learned. I wish I had learned about these techniques long before, and thereby allowing me to create more effective code. In this tutorial I'll try to explain some problem areas that I have identified, and some of the things you can do to improve performance. - Date added: Mon. January 12, 2004
 Improving Application Performance (Part 2)
Not all queries can be saved as an application variable. For Queries that do not meet the checkpoints in my previous tutorial there is another way to improve performance. Query Caching is another way to save data and eliminate unnecessary queries. This is for queries that are more dynamic in nature. - Date added: Mon. January 12, 2004
 Slighty better search
Someone on the forum posed a question a short while ago asking how to create a more advanced search function using a + symbol as a separator. So I created this advanced search function. This search function is just slightly better than a normal search as it adds the ability to separate two keywords with a + symbol. Lets start with the search form. - Date added: Thu. December 4, 2003
 Dynamic Sorting with CFSWITCH
Quickly and easily sort and order records in your database using a cfswitch in your query. Great technique for admin areas of your site, or just allowing visitors to sort the fields they want. - Date added: Sun. August 3, 2003
Additional Tutorials:
· Adding an indexed Search to your site (Part 2)
· Adding an indexed Search to your site (Part 1)
· Changing site color scheme
Please rate this tutorial:
5 Stars 4 Stars 3 Stars 2 Stars 1 Stars
Comments on this tutorial
Read previous comments on this particular tutorial
color picker is not changing color or closing pop up
Hi,

I am trying to use the color picker tutorial in my admin page...anyways, when using the demo every ting works fine, though when edited for my site when a color is selected, the poop up doesnt close and doesn't pass the selected color.

I am changing a number of colors on the same page, though i have seperate variables so it shouldn't effect the others.

Cheers

AD
Posted by: Andrew
Posted on: 12/20/2004 12:12 AM
Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase:
 
Skyscrapper Banner Advertisement
ProWorkFlow.Com

You are 1 of 669 active sessions! | Privacy | Company
Copyright © 2002 EasyCFM.Com, LLC. (Easy ColdFusion Tutorials) All Rights Reserved
All other trademarks and copyrights are the property of their respective holders.
ColdFusion Hosting ColdFusion Hosting
ADD TO:
Blink
Del.icio.us
Digg
Furl
Google
Simpy
Spurl
Y! MyWeb