## dhtmlxColorPicker Guide

### Main features

- Multibrowser/Multiplatform support
- Usual visual appearence
- Flexible controll with JavaScript API
- Complete Colors Palette
- RGB/HSL
- Custom colors support

### Supported browsers

- IE 5.5 and above
- Mac OS X Safari
- Mozilla 1.4 and above
- FireFox 0.9 and above
- Opera

### Working with dhtmlxColorPicker

#### Initializing object

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>

#### Changing properties

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>

#### Using Custom Colors

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

#### Events system

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);

© DHTMLX LTD.