Search code examples
jqueryspectrum

Changing jQuery spectrum color palette after initializing?


I'm using jQuery Spectrum as a color picker in my app (http://bgrins.github.io/spectrum). I can't figure out how to set the palette after the plugin has been initialized.

This how I create a palette when it's first initialized:

$("#showPalette").spectrum({
    showPalette: true,
    palette: [
        ['black', 'white', 'blanchedalmond'],
        ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
    ]
});

How could I update the palette to a new selection of colors without destroying and re-initializing?

Thanks for any help.


Solution

  • Saw that no one has responded to this yet so I'd thought I give it a try. The short answer is that it is possible to change almost anything once it is in the DOM. I created a simple demo here to show the color palette initialized and then dynamically added (and removed) a color to the palette.

    Hope this helps.

    jsfiddle code demo

    $("#colorTest").spectrum({
        showPalette: true,
        flat: true,
        palette: [
            ['black', 'white', 'blanchedalmond'],
            ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
        ]
    });
    
    $('#add').click( function() {
        var newColor = "<span id='colorRed' title='red' data-color='red' class='sp-thumb-el sp-thumb-light'><sp class='sp-thumb-inner' style='background-color: red;'></span></span>";
    
        if ( $("[data-color='red']").length == 0 ) {
           $(newColor).appendTo('.sp-palette-row-0');
        }
    });
    
    $('#remove').click( function() {
       $('#colorRed').remove();
    });