Home
Other
Here
Description: Need a color picker for your
online forms or application? This advanced color picker is based on Yahoo's
excellent UI
library, more specifically, the
slider widget. We've added additional code to help integrate the color
picker with forms on your page, so clicking on specific form fields causes
the selected color value to be populated inside them in real time.
Furthermore, a color box is shown alongside the field to display the current
input color in real time.
One known issue with this script is in Opera 8.x, where dragging
of the color picker and selection ball is non functional. FYI this is the same
color picker we're using in our
Button Maker tool. Enjoy!
Demo:
Directions:
Simply download
yuicolorpicker.zip, and open up "demo.htm"
using any text editor for the code to insert onto your page.
Customization
While this script references multiple .js files, to integrate
the color picker with your form in the fashion above, you do not need to be
bothered with modifying any of these files. Instead, there are only two
changes you need to make to the code of "demo.htm" to integrate the
color picker into your page:
1) Locate the code:
ddcolorposter.fillcolorbox("colorfield1",
"colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1"
with hex value from "colorfield1"
These two lines are used to prefill the color boxes to the right
of the form fields in question with the color currently inside the field when
the page first loads. Without this code, when your page loads, the color boxes
will not be initially filled with the color values inside the form fields.
There are two fields in the demo, hence two lines. The first
parameter of fillcolorbox(), "colorfield1", should be the ID of the form field,
while the second parameter, the ID of the matching color box. See below for more
information.
2) Locate the code:
<form>
# <input type="text" id="colorfield1" onFocus="ddcolorposter.echocolor(this,
'colorbox1')"> <span id="colorbox1" class="colorbox">____</span> <br />
# <input type="text" id="colorfield2" onFocus="ddcolorposter.echocolor(this,
'colorbox2')"> <span id="colorbox2" class="colorbox">____</span>
</form>
This code demonstrates how to integrate the color picker with
any form field on your page. The key is the add the code:
onFocus="ddcolorposter.echocolor(this,
'colorbox1')"
inside the desired form fields, where "colorbox1" is the ID of
color box. That's it!