How to Start with ColorPicker

There are two ways of ColorPicker initialization:

by explicitly specifying the container, e.g. div. In this case ColorPicker will be set in the container the position of which will define the ColorPicker's place on a page;
without specifying a container. Thus, ColorPicker will be initially hidden.

In order to show it, the method show() should be used and the method setPosition() will help to position ColorPicker on the page.

This process can be automatized, by linking one or more inputs to ColorPicker. Clicking an input will show ColorPicker next to it.

To link inputs to ColorPicker you should define a list of inputs at the step of initialization or call the method linkTo() for each input.

The first steps that need to be done for any type of dhtmlxColorPicker's initialization are the following:

Download the dhtmlxColorPicker package from the server and place it in a folder;
Create an HTML file;
Place the full paths to dhtmlxColorPicker's CSS and JS files into the header of the created HTML file.

If you use dhtmlxColorPicker standalone you need to include 2 files:

dhtmlxcolorpicker.js
dhtmlxcolorpicker.css

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxcolorpicker.css">
        <script src="../codebase/dhtmlxcolorpicker.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxColorPicker as a part of "dhtmlxSuite" package you need to include 2 files:

dhtmlx.js
dhtmlx.css

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

DIV-Based Initialization

Step 1. Creating a container

The user needs to create an object where dhtmlxColorPicker will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

<div id="colorPicker" style="position:absolute;top:150px;left:200px;"></div>

Step 2. Creating dhtmlXColorPicker object

The next step is to create a new dhtmlXColorPicker and place it after the <div> element (object) that we've just created:

var myColorPicker = new dhtmlXColorPicker({
    parent : "c1",
    color : "#0000ff",
    custom_colors : true
});

parameters:

parent - (string or object) id of HTML element which will be used as parent ( or object itself ), mandatory
color - (string) the color initially set in ColorPicker (setColor())
custom_colors - (string|array|boolean) true to show a block of predefined custom colors (showMemory()), to fill the block set a string|array of colors (setCustomColors())

You can find other available parameters in the article Object Constructor.

Initializing and attaching to inputs

As it was said before, it is possible to create ColorPicker and link it to several inputs situated on a page.

Step 1. Creating inputs

Firstly, the user should create the inputs, for example:

<input type="text" id="colorPicker_1">
<input type="text" id="colorPicker_2">
<input type="text" id="colorPicker_3">
<input type="text" id="colorPicker_4">

Step 2. Creating ColorPicker and linking it to inputs

And then, the following code creates a ColorPicker object and links it to the created inputs:

myColorPicker = new dhtmlXColorPicker("СolorPicker_1",
    "СolorPicker_2","СolorPicker_3","СolorPicker_4");

myColorPicker = new dhtmlXColorPicker();
myColorPicker.linkTo("СolorPicker_1");
myColorPicker.linkTo("СolorPicker_2");
myColorPicker.linkTo("СolorPicker_3");
myColorPicker.linkTo("СolorPicker_4");

The ColorPicker will be activated when the user clicks somewhere in the input.

When the necessary color is chosen and the button "Select" is pressed, the ColorPicker closes. The code of the chosen color is displayed in the input (for example, #77e5cd).