Multiple color pickers call wrong events.

[emn178]

Hi,

Please see this. https://jsfiddle.net/u9v08hbu/9/

$('#color2') still call $('#color')'s event.

[PitPik]

Hi @emn178, unfortunately tinyColorPicker doesn't support multiple instances, well, it does in a way, but they share a single setup (some options, but renderCallback is definitely shared and overwritten by the last one, like in your case) and a single markup. This was explained in many issues already. There is usually no need to have multiple instances unless you really need to show 2 pickers at the same time. So for your code this would be:

$('#color').colorPicker({
    renderCallback: function ($elm, toggled) {
        $elm.css('background-color', '#' + this.color.colors.HEX);
    }
});
$('#color2').colorPicker();

So the $elm takes care of the right element. There is a lot of ways to deal with different 'instances' to always choose the right way. The reason for this single instance way is its compactness and very tiny memory footprint. If you would ever need a real multiple instance color picker then use the big brother of tinyColorPicker: https://github.com/PitPik/colorPicker.

BTW: If you want alpha channel to work:

$('#color').colorPicker({
    renderCallback: function ($elm, toggled) {
        var colors = this.color.colors,
              rgb = colors.RND.rgb;

        $elm.css('background-color', 'rgba(' +
            rgb.r + ', ' + rgb.g + ', ' + rgb.b + ',' + colors.alpha + ')');
    }
});

or even simpler:

$('#color').colorPicker();

and if you want to start with a color, your markup should look like the following:

<div id="color" class="color" value="#556B2F"></div>

You probably never saw anything because the alpha was on 0. See: https://jsfiddle.net/u9v08hbu/11/

Cheers

[PitPik]

Hi @emn178 again, I updated to https://jsfiddle.net/u9v08hbu/12/ for some more examples in case you need to do different things on different elements. This example is also fast as it cashes the references of #color and #color2.

...and https://jsfiddle.net/u9v08hbu/13/ to show how to read color value on change...

[emn178]

Thanks, I will try this method.

[PitPik]

Hi @emn178 again, I made some example that explains better what can be done: https://jsfiddle.net/u9v08hbu/15/ id="color" changes the bg-color; id="color2" the font color; id="color2" can not change alpha (opacity) channel and values are printed on close and while picking a color... And a bit optimized in: https://jsfiddle.net/u9v08hbu/17/

[emn178]

I wrap and simplify it. The usage looks like a normal jQuery plugin (hide singleton concern). I think this is a better design to the users. I put it on my GitHub.

Thanks for help.