Color Picker
By: Mark Aplet

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.

About This Tutorial
Author: Mark Aplet
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF4,CF5,CFMX
Total Views: 32,578
Submission Date: July 12, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 8
Discuss This Tutorial

  • 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

Advertisement

About
Resources
Social
Sponsored By...
Powered By...

© 2002-2012 EasyCFM, LLC. All rights reserved.
You are 1 of 921 active visitors.