 |
 |
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;"> </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.