up Colors ,
.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..
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:
- the code that we converted into a stored script,
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:
2)When you create your form be sure to give it a unique name: <form
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:
style="border: 1px solid #000000; font-family:Verdana; font-size:10px;
text-decoration: none;"> </a>
<input id="tcptestinput2field" size="7" name='input2'
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
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.