Bookmark to del.icio.us
FF1+ IE6+ Opr8+
Color Picker Widget (YUI based)
Update May 15th, 08': Script now auto colors preview controls based on hex value (if any) in corresponding input field when page loads.
Description: Color Picker Widget iis an advanced Color Picker script that can be easily integrated into any form field(s). Based on YUI's Color Picker, it extends it with the following user friendly features:
Easy to set up, picking a color inside your FORMs is no longer a headache, either for you or your users!
Note that this script replaces the script YUI Color Picker, still available if you need to refer to it for any reason.
Demos (Floating Color Picker shown):
Please choose a color: DD Color Picker Widget
That's it! Just for good measure, below is the inline, more detailed install instructions:
Step 1: Insert the below into the HEAD section of your page:
Step 2: Add the below two demos to the BODY of your page:
The full HTML for a Color Picker instance, including the FORM, looks like this:
<!--HTML for Color Picker. Should contain two unique
Inside the FORM (1st portion above), give each color input field a unique ID
(in red), then optionally some arbitrary HTML that will act as a control (in
blue). A control activates the Color Picker and sets focus to the associated
input field when clicked on, and should also each be given a unique ID. If you
don't wish the control's background color to change based on the selected color,
give it a CSS class of "
The 2nd portion of the code defines the skeleton HTML for the Color Picker itself. Simply define a main Widget DIV with an inner DIV that will be populated with the Color Picker itself. For this inner DIV, you'll want to give it at a minimum the following style:
This is for the purpose of correctly positioning the Color Picker within the Widget Container.
Finally, the 3rd portion of the code, which should always follow the previous two, ties everything together and renders the Color Picker. The parameter:
fields: ['field1:control1', 'field2:control2', 'field3']
is where you enter the ID of the color input fields within the FORM, plus
optionally the ID of its control. In the above case, "
floatattributes: ['Color Picker Widget', 'width=430px,height=250px,resize=1,scrolling=1,center=1'],