dhtmlxColorPicker can be initialized on page either based on DIV element (in this case its position is defined by position of this DIV) or attached to some text input (in this case position of ColorPicker will be assigned to position of INPUT element taking its visibility on page into account )

How to set path to images folder (codebase/imgs/ in most cases)

There are three ways to set path:

• through setImagePath(PATH)
• as global js variable window.dhx_globalImgPath = PATH - this is good way if all images for all dhtmlx components which are used on page a re place in the same folder
• as input parameter imagepath - this way is suitable for initialization from INPUT (see below)

Based on DIV element

<div id="colorPicker" style="position:absolute;top:150px;left:200px;"></div> <script> //color picker can be initialized in specified container var myCP = new dhtmlXColorPicker("colorPicker"); myCP.setImagePath("codeabse/imgs/"); myCP.init(); </script>

Attached to input

<input type="text" imagepath="codebase/imgs/" id="dhtmlxColorPicker1"> <script> myCP = dhtmlXColorPickerInput('dhtmlxColorPicker1'); myCP.init(); </script>

If you add attribute "colorbox" to your input, it will get small square with chosen color as a background in front of it

<input type="text" imagepath="codebase/imgs/" colorbox="true" id="dhtmlxColorPicker2"> <script> myCP = dhtmlXColorPickerInput('dhtmlxColorPicker2'); myCP.init(); </script>

dhtmlxColorPicker has number of javascript methods which help to define its properties on the fly:

Position: setPosition();

Selected color: setColorRGB()

Visibility: hide(), show()

For complete list of methods please see API documentation.

<script> //hide - show var z=new dhtmlXColorPicker("null, true"); z.init(); z.setColor("#123456"); z.setColor([56,34,12]); z.setColor("rgb(10,27,99)"); z.hide(); z.show(); </script>

Custom Color palette can be used to keep colors which are most useful or popular for the case. User can add color there by selecting necessary custom color palette cell and pressing Add To Custom Colors button. Chosen value will be saved in cookies, thus it will be available to user next time he visit the page.

v.1.0 doesn't allow programmatic way of setting Custom Colors Palette values

You can define your own action for the moment when user has chosen the color. To do this use setOnSelectHandler method. Event handler which is defined this way will get color value as incomming argument

function setBackgroundColor(color){ document.getElementById("zoneA").style.backgroundColor="#"+color; } var z=new dhtmlXColorPicker(); z.init(); z.setOnSelectHandler(setBackgroundColor);