JavaScript Components: Color Picker II

Picking up Colors , Part II
Credit:
Flooble

Description
.We have one component to pick up colors- why do we need another ? Because the Tigra color picker takes a bit long to initialize and does not give a hint of the color just picked.. The Flooble color picker is very fast and leaves a color chip behind showing a sample of the color picked. The trade-off is that the Tigra color picker shows more colors and categorized neatly into 3 groups: Websafe, Windows System, and Grey scale. So you choose your Color Picker..

Key features and JavaScript elements
Flooble uses CSS and DOM programming extensively to create a popup window color picker which works at lightning speed in comparison with the Tigra picker. The color picker component automatically fills in the associated form field. There are 2 major parts to the Flooble color picker component:

colorpickFoobleer.js - the code that we converted into a stored script, colorpickerFooble.js, on our javascript folder
form code snippet- contains the code that displays the different color palettes
We show that code here using a "simplified" . naming convention. Floobie has gone to great lengths to ensure that each color field and Floobie control are uniquely named. They use a special 10 digit, presumably random generated integer to create the unique name for form and the id for the input field. We shall simplify the process by using a combination of a unique name for the the form and then a unique name for the input field. Combining these will name the color picker chip or button id. And then using this same formnamefieldname combo we append field for the unique id for the input field. So the input field must have a unique name and id value - and that id value must follow the "formnamefieldnamefield" template. For some strange reason, Flooble insists the field id end with 'field' . A bit perplexing ? See if the sample below spells it out clearly enough.

To use the color picker is a four step process.
1) add, the following code to the <head> of your web page:
  <script language=JavaScript src="javascript/colorpickerFlooble.js" ></script>
2)When you create your form be sure to give it a unique name: <form name="someUniqueName">
3)For the input field, also give it a unique field name because that is what will be passed to the color picker.
4)Finally place the color picker icon code around the input field as follows:
  <form name='tcptest'>
 <a href="javascript:pickColor('tcptestinput2');" id="tcptestinput2"
style="border: 1px solid #000000; font-family:Verdana; font-size:10px;
text-decoration: none;">&nbsp;&nbsp;&nbsp;</a>
<input id="tcptestinput2field" size="7" name='input2' value="#336699">
<script language="javascript">relateColor('tcptestinput2', getObj('tcptestinput2field').value);</script>

I have bolded the 'simplified' naming. First the form gets a unique name, tcptest.. Next, the input field also has a unique name, input2. This guarantees that the combination, tcptestinput2, is a unique name for the color picker chip or button. Finally we have to supply a unique id for the input field in addition to the name. This requirement is a vestige of Browser wars where Microsoft's id was chosen over Netscape's name for use in DOM and other JavaScripting.with Form fields and other HTML objects. So the input field gets a unique id, tcptestinput2field. The final <script> code transfers the color picked to the input field. Voila you are done, so try the Flooble in action just below.
 

Try out the script with this demo form
Flooble with non-editable field, typical usage    
Flooble with editable field example with simplified naming    
Flooble with hidden field example with simplified naming    
        
Again note that the Flooble color picker has the advantage that it uses a small color chip as button and indicator of what color has been chosen. However,it has a much more restricted set of colours to choose from - 64 including no color . In contrast, the Tigra Color Picker gives 216 Web Safe colors, 216 Windows System colors and 256 Greyscale colors to choose from. Be picky picky.
Top of Page  Tutorials Home  Javascript References  JavaScript Books