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:
- Ability to display the Color Picker either inline on the page, or as a floating widget, activated by clicking on a "control".
- An arbitrary control can be defined and associated with the target form element, so clicking on it activates the Color Picker while optionally painting the control's background with the selected color in real time.
- Easily customizable- Each Color Picker is simply defined as an empty DIV on the page, surrounded by additional content of your choice.
- Multiple instances of YUI Color Picker supported, so two groups of FORM elements on the page can each have its own Color Picker, instead of one shared by all FORM elements, for example.
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):
Directions:
Simply download ddcolorpicker.zip, and refer to colorpicker.htm for the HTML to paste to your page, plus the accompanying files to upload to your site. The zip file contains:
- colorpicker.htm
- ddcolorpicker.js
- windowfiles/dhtmlwindow.js
- windowfiles/dhtmlwindow.css
- remotely hosted YUI files
- images used by the 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:
<form>
<div>Rectangle control, preview on: <input type="text" id="field1"
size="20" /> <span id="control1"
class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2"
size="20" /> <a id="control2" class="nopreview"
href="#">[Select Color]</a></div>
<div>No control, instead set focus on field: <input type="text" id="field3"
size="20" /></div>
</form>
<!--HTML for Color Picker. Should contain two unique
IDs-->
<div id="ddcolorwidget">
Please choose a color:
<div id="ddcolorpicker" style="position:relative;
height:205px"></div>
<a href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/" style="margin-left:5px; font-size:90%">DD Color Picker Widget</a>
</div>
<script type="text/javascript">
ddcolorwidget.init({
colorcontainer: ['ddcolorwidget', 'ddcolorpicker'], //id of widget DIV, id of
inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget',
'width=430px,height=250px,resize=1,scrolling=1,center=1'], //'float' window
attributes
fields: ['field1:control1', 'field2:control2', 'field3']
//[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})
</script>
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 "nopreview".
Finally, if a color input field has no control defined for it, setting focus on
the field itself activates the Color Picker.
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:
style="position:relative; height:205px"
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, "field3"
doesn't have a control, and instead activates the Color Picker when the user
sets focus on the field itself. You can also modify basic attributes of the
floating DHTML Window via the parameter:
floatattributes: ['Color Picker Widget', 'width=430px,height=250px,resize=1,scrolling=1,center=1'],