Add color Picker widget to your blog

Its not always adobe photoshop best to pick the Color. Now the dynamicdrive brings you the new widget named color picker Widget.By installing this widget in your blog you can pick colors without leaving your blog. You are also provided with a demo Page . So before installing this widget please visit the Demo Page .This widget 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.

You can setup this widget on your blog by following this two steps:

First of all Copy the Following Code and Paste it to the head section of your blog.

<!-- YUI Dependencies --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js" ></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/slider/slider-min.js" ></script> 

<!-- Color Picker source files for CSS and JavaScript --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/colorpicker.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/colorpicker/colorpicker-min.js" ></script>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/windowfiles/dhtmlwindow.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/windowfiles/dhtmlwindow.css" />

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/ddcolorpicker.js">

/***********************************************
* Color PIcker Widget (YUI Based)- By Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Requires: YUI Color Picker and DHTML Window Widget
***********************************************/

</script>


<style type="text/css">

* html .yui-picker-bg{ /*Requires CSS. Do not edit/ remove*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/picker_mask.png',sizingMethod='scale');
}

/*Style used in demos below. Edit if desired*/

.colorpreview{ /*CSS for sample Preview Control*/
border: 1px solid black;
padding: 1px 10px;
cursor: hand;
cursor: pointer;
}

form div{
margin-bottom: 5px;
}

</style>

Now Paste the following code in your blog by adding a new page Element.

<h2>Example 1: Floating Color Picker</h2>

<form>

<p>Select a Color:</p>

<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="ddcolorpicker">
Please choose a color:
<div id="colorpicker" 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">

ddcolorpicker.init({
colorcontainer: ['ddcolorpicker', 'colorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})

</script>


<hr style="margin-top: 100px" />

<h2>Example 2: Inline Color Picker (always visible)</h2>


<form>

<p>Select a Color:</p>

<div>Rectangle control, preview on: <input type="text" id="field1alt" size="20" /> <span id="control1alt" class="colorpreview"> </span></div>

<div>Text link control, preview off: <input type="text" id="field2alt" size="20" /> <a id="control2alt" class="nopreview" href="#">[Select Color]</a></div>

<div>No control: <input type="text" id="field3alt" size="20" /></div>

</form>

<!--HTML for Color Picker. Should contain two unique IDs-->

<div id="ddcolorpickeralt">
<div style="color:white; background:black; width: 400px; margin:1em 0; padding: 3px">Set focus on form field, then choose a color:</div>
<div id="colorpickeralt" style="position:relative; height:205px"></div>
</div>


<script type="text/javascript">

ddcolorpicker.init({
colorcontainer: ['ddcolorpickeralt', 'colorpickeralt'],
displaymode: 'inline',
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'],
fields: ['field1alt:control1alt', 'field2alt:control2alt', 'field3alt']
})

</script>

If you got any problem or Widget don't work then please leave a comment.