dynamically set the colpick default color

Question

$('.color-box').colpick({
    colorScheme:'dark',
    layout:'rgbhex',
    color:'ff8800',
    onSubmit:function(hsb,hex,rgb,el) {
        $(el).css('background-color', '#'+hex);
        $(el).colpickHide();
    }
})
.css('background-color', '#ff8800');

as you can see, I can set the default color of the colpick using color:ff8800.

But is there a way to set the color dynamically when the colorpicker is shown?

I mean, if I use a button to trigger this colpick ('#test1').colpick(); The test1 already has a background color, I wish to make something like color: ('#test1').css(background-color) rather than using the default color of colpick, which is color: ('#test1').css(background-color).

By the way, could someone tell me what does color: .css('background-color', '#ff8800') mean? is this a chain function?

Thanks !

`color: '#' + $('#test1').css('background-color')` add quotes around the property, and `$` before the selector. But you've sad this is the same as the default, isn't it? — vaso123, Jan 21 '15 at 15:52
@ **lolka_bolka**, `$('#test1').css('background-color')` results with RGBa color format (`rgba(...)`). You need to convert it to HEX — Artur Filipiak, Jan 21 '15 at 15:54
@lolka_bolka I think this will work, but I am thinking about if I have 10 buttons, is there a way I can pass the color using something like color: '#' $(this).css('background-color') where $(this) is the button that fire the color picker. ($(this) is not working in this case)... — Guifan Li, Jan 21 '15 at 16:14
Yes. Add a class to those buttons, and when you click, then says `$('.colorPickerButton').click(function() {var color = $(this).css('backgrdound-color')});` — vaso123, Jan 21 '15 at 16:15
@lolka_bolka But this will only set the button's background color, what I want is to set the colpick's color when I open it (so that the colpick show the same color as the button shows). — Guifan Li, Jan 21 '15 at 16:20
I've just show, how you can get the actual buttons color. Of course, then you need to call the colpick. — vaso123, Jan 21 '15 at 16:20
@lolka_bolka Do you mean something like $('.color-box').click(function() {var color = $(this).css('backgrdound-color')}).colpick({ colorScheme:'dark', layout:'rgbhex', color: color, onSubmit:function(hsb,hex,rgb,el) { $(el).css('background-color', '#'+hex); $(el).colpickHide(); } }) — Guifan Li, Jan 21 '15 at 16:34
@**Guifan Li**, take a look at my answer. **colpick**, does not support RGB color format (string) unless it's converted to object (`{r:0, g:0, b:0}`) or HEX. Also, the `color` does not support **function**, it supposed to be a **string** or **object** — Artur Filipiak, Jan 21 '15 at 16:55
@phillip100 Thanks very much for your answer, I will try this out. Just wondering will one click trigger both "var my_color = rgb2hex($(this).css('background-color'));" and "colpick"? since colpick need one click to trigger. — Guifan Li, Jan 21 '15 at 17:12
@Guifan Li, Yes, I know the issue, therefore I used `mousedown` :-) Take a look: http://jsfiddle.net/9dLvd68x/ — Artur Filipiak, Jan 21 '15 at 17:14
@phillip100 This is really amazing :) One more thing I am thinking is that is there a way to close colpick if you click the button the second time. (toggle the colpick)? — Guifan Li, Jan 21 '15 at 17:27
@phillip100 This works, sometimes you need to click twice to make the colpick show. What is the reason you connect a click after each()? why you need to use each here? Appreciate about this! — Guifan Li, Jan 21 '15 at 19:24

score 1 · Accepted Answer · answered Jan 21 '15 at 16:54

Based on discussion with OP.

It should be like this. Now I am using data-color to get out the color, because as philip100 sad, if you get the background-color css property, that will be in rgba format. (But ther is $.colpick.rgbToHex(rgb) function to do it).

$('.cpicker').click(function() {
    var color = $(this).data('color');
        $('#picker').colpick({
    //Any other options
    color: color

    });
});

HTML

<button class="cpicker" style="background-color: #f00;" data-color="#f00">Red</button>
<button class="cpicker" style="background-color: #0f0;"   data-color="#0f0">Green</button>
<button class="cpicker" style="background-color: #00f;" data-color="#00f">Blue</button>

<div id="picker"></div>

This is helpful, and I have tried this. I appreciate about this. The only issue is that, in this case, I need to click the button first (the color picker is not shown at this time)-> then need a second click on #picker to fire the colpick. Since for colpick function, its 'showEvent' attribute is set to click. I am new to Javascript, so I am not sure how to modify this, so that only one click will trigger both "var color = $(this).data('color');" and $('#picker').colpick. — Guifan Li, Jan 21 '15 at 17:08

score 1 · Answer 2 · answered Aug 27 '15 at 06:31

You can use the below code to set the color dynamically.

$('.color-box').colpickSetColor('ff8800');

Please note that none of the below formats will work. Only the above syntax of color code will work.

$('.color-box').colpickSetColor('fff');
$('.color-box').colpickSetColor('#fff');

score 0 · Answer 3 · answered Jul 28 '15 at 04:54

$('.cpicker').each(function() {
    var $box = $(this);
    var $color = $(this).data('color');
        $box.colpick({
             colorScheme:'dark',
             layout:'hex',
             color: $color,
             onSubmit:function(hsb,hex,rgb,el) {
                    $(el).css('background-color', '#'+hex);
                    $(el).val(hex);                 
                    $(el).colpickHide();
                }

    });
});

dynamically set the colpick default color

3 Answers3