Tutorial: Color Picker

Coldfusion Tutorial: Color Picker

Description
A simple and full featured color picker. It is component based. Just create a picker.cfc file. That you can reuse. Finaly you can call this component from any where in your application.



Example

picker.cfc page

<cfcomponent>
 <cffunction name="ColorPicker" access="remote" returntype="string">
  <cfwindow name="ColorWindow" initshow="false" width="200" height="220">
   <script language="javascript">
    function thisElement(name){
     currentElement = name ;
    }
   </script>
   
   <script language="javascript">
    function selectedColor(colorValue){
     var currentColor = colorValue ;
     //document.getElementById(currentElement).value="#"+currentColor;
     document.getElementById(currentElement).style.backgroundColor="#"+currentColor;
    }
   </script>
  
   <cfset CharList="0,3,6,9,C,F">
   <cfset Counter=0>
   <cfoutput>
    <table border="0" cellspacing="1">
     <tr>
      <cfloop list="#CharList#" index="GreenColor">
       <cfloop list="#CharList#" index="BlueColor">
        <cfloop list="#CharList#" index="RedColor">
         <cfif Counter % 18 EQ 0>
          </tr><tr>
         </cfif>
         <td onmouseover="document.getElementById('codeDisplay').value ='###RedColor##RedColor##GreenColor##GreenColor##BlueColor##BlueColor#';"
          onclick="selectedColor('#RedColor##RedColor##GreenColor##GreenColor##BlueColor##BlueColor#');
             javascript:ColdFusion.Window.hide('ColorWindow');"
           title="#RedColor##RedColor##GreenColor##GreenColor##BlueColor##BlueColor#"
           style=" background-color: #RedColor##RedColor##GreenColor##GreenColor##BlueColor##BlueColor#; color: black; font-size:7px; width:7px; height: 7px; cursor:pointer">
          <a onmouseover="document.getElementById('colorDisplay').style.backgroundColor ='#RedColor##RedColor##GreenColor##GreenColor##BlueColor##BlueColor#';">   </a>
         </td>
         <cfset Counter=Counter+1>
        </cfloop>
       </cfloop>
      </cfloop>
     </tr>
     <tr>
      <td colspan="18" headers="5"></td>
     </tr>
     <tr >
      <td id="colorDisplay" colspan="9" height="15" bgcolor="" style="background-color: red;"></td>
      <td colspan="9" height="15" bgcolor=""><input type="text" value="" id="codeDisplay" style="height: 15px; width: 90px; border: none; font-size: 12px;" readonly="yes"></td>
     </tr>
    </table>
   </cfoutput>
  </cfwindow>
 </cffunction>
</cfcomponent>

   

picker.cfm this is caller page. Here you must pass the input box id to javascript.

<cfscript>
 objPicker=CreateObject("component","picker");
</cfscript>
<cfset objPicker.ColorPicker()>

<cfoutput>
<center>
<form name="oTableForm" action="" method="post">
 <table>

  <tr>
   <td colspan="2">Click the box</td>
  </tr>
  <tr>
   <td>Color 1:</td>
   <td>
    <input type="text" name="color1"   readonly="yes" value="" onfocus="javascript:ColdFusion.Window.show('ColorWindow'); thisElement('color1');" />
   </td>
  </tr>
  <tr>
   <td>Color: 2</td>
   <td><input type="text" name="color2"    readonly="yes" value="" onfocus="javascript:ColdFusion.Window.show('ColorWindow'); thisElement('color2');" /></td>
  </tr>
 </table>
</form>
</center>
</cfoutput>

   

Example Output