Color Picker

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.



All ColdFusion Tutorials By Author: Mark Aplet
  • Adding an indexed Search to your site (Part 1)
    It is very easy to set up and create a professional search function much like a real search engine. Use Verity Collections and the tag to create fast search forms for your web sites.
    Author: Mark Aplet
    Views: 28,956
    Posted Date: Saturday, February 1, 2003
  • Adding an indexed Search to your site (Part 2)
    The long overdue part two of adding a verity search function. This part demonstrates how to index the information in your database so that it becomes usefull too.
    Author: Mark Aplet
    Views: 18,642
    Posted Date: Monday, May 5, 2003
  • 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.
    Author: Mark Aplet
    Views: 6,873
    Posted Date: Wednesday, March 15, 2006
  • Changing site color scheme
    Add some personalization to your pages by letting the user pick their own color scheme. It's really quite simple and the benifits are awsome. This tutorial shows you how to set up your pages to use a dynamicly included scheme. It will also show you how to create all the pages neccessary to administer the color schemes.
    Author: Mark Aplet
    Views: 17,859
    Posted Date: Friday, November 29, 2002
  • Color Picker
    Sometimes, you want to be able to change the color of something on your page. Be it one item, or every item on the page. Using this simple color picker, you can create admin areas that can allow you or your visitors to pick their own colors and the value is automatically inserted into a text field.
    Author: Mark Aplet
    Views: 11,472
    Posted Date: Saturday, July 12, 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.
    Author: Mark Aplet
    Views: 14,260
    Posted Date: Sunday, August 3, 2003
  • 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.
    Author: Mark Aplet
    Views: 12,569
    Posted Date: Monday, 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.
    Author: Mark Aplet
    Views: 8,657
    Posted Date: Monday, 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.
    Author: Mark Aplet
    Views: 13,588
    Posted Date: Thursday, December 4, 2003