Sample 1

If there is not enough free space from the control to the upper side of the screen the selector opens downwards automatically.

This sample has also a callback function that logs to the web broser console the color swatch clicked ( onchange_callback ) and also just before the colors bubble is shown ( onbeforeshow_callback )

Sample 2

If there are several inputs with the same name all all them are updated on color selection. In this sample the clear button is set to be last one.

Sample 3

The control can be inserted before or after the input. You can also customize the style of the color swatches, with the custom_class .double the swatches are wider.

Sample 3B

The bubble is forced to the left side of the button adding the f.force-left class.

Sample 4

In this sample the color palette is forced to open downwards.

Sample 5

With tha custom_class .wide swatches expand to be fullwidth.

Sample 6 A/B

Without clear button, you can clear the selection programatically calling:

$( input_element ).data('paletteColorPickerPlugin').reset();

Reset sample 6A | Reset sample 6B

Sample 7

Reload the value after it has been changed programatically. The new color should exists in the initial options otherwise the selection will be reset to initial value.You can reload the value after programatically changing the value of input calling:

$( input_element ).data('paletteColorPickerPlugin').reload();

Change to existing value of #69F0AE | Change to non-existing value of #808080 (will reset to initial value)

Sample 8

This sample has the set_background:true; that sets the input's background color to the selected one. Seems that some users find this useful ;)