There is a method in dhtmlxColorPicker that allows changing its position on the fly:
myColorPicker.setPosition(x,y);
This method sets new left (x) top (y) position of the component.
The Color Picker can be easily shown/hidden in the following way:
myColorPicker.show();
myColorPicker.hide();
The color picker can be linked to some objects on page. In this case, the linkTo() method is used. The first parameter of this method indicates the object which color will be changed, the second one - indicates the object that will call the color picker, and the third (optional) parameter will contain the hex code of the chosen color.
For example, the code below shows the color picker linked to inputs and a button. The color picker is called by pressing the button. The chosen color will be set as background for one input, and another input will contain this color's value in hex format:
<input id="a1"> // create an input
<input id="a3"> //create one more input
<input type="button" value="Select color" id="a2"> // create a button
<script> var myColorPicker = new dhtmlXColorPicker();
myColorPicker.linkTo("a1","a2","a3");
</script>
By default, the Color Picker's configuration presupposes that the component will be hidden/closed after the end-user chooses the color in the palette and presses the button "Select".
The method hideOnSelect() is responsible for this behavior of the color picker. If this method is set to true, dhtmlxColorPicker will behave the way that was described above. Setting this method to false means that the component will stay on page even after pressing the button "Select".
myColorPicker.hideOnSelect(true/false); // true by default
The method unload() removes the color picker:
var myColorPicker = new dhtmlXColorPicker(...);
// unloading
myColorPicker.unload();myColorPicker = null;