0

I am using Spectrum Colorpicker and need to add multiple colorpicker pallettes in one div. By default it has to show only one colorbox, onclick of +add it has to add one more colorbox and so on...

Thanks in Advance for your help,

My HTML Code:

<!-- Color Picker -->
<div class="colorpicker-container">
    <input class="full" />
    <a href="#">+ Add</a>  
</div>
<!-- /Color Picker -->

Can somebody please help me out?

Reddy
  • 1,477
  • 29
  • 79

1 Answers1

0

Try something like this:

HTML

 <!-- Color Picker -->
    <div class="colorpicker-container">
        <input class="full" />
        <a class="add" href="#">+ Add</a>  
    </div>
    <!-- /Color Picker -->

JQuery

  $(document).on("click", ".add", function(){
           $(this).before("<input class='full' />"); 
            $('.full:empty').spectrum({
               showPaletteOnly: true, // if you want to only have the palette
               showPalette:true,
               palette: [ // here the colors you want to have on your palette
                 ['black', 'white', 'blanchedalmond',
                 ['red', 'yellow', 'green', 'blue', 'violet']
               ]
            });
        });
twain
  • 1,305
  • 11
  • 16
  • Hi Twain, Thanks for quick reply... It has almost done my requirement.. but onclick +Add it has to popup colorpicker pallette instead of colorbox then clicking on it... your help highly appreciated. Thanks – Reddy Nov 25 '14 at 06:28
  • i updatet my answer, you can specify your spectrum like you want to in the click function :) – twain Nov 25 '14 at 06:43
  • Again, thanks for your help @twain. Will try that as I am not much into programming :( – Reddy Nov 25 '14 at 06:45
  • I've updatet it again to support you. For more options just look in the spectrum api at https://bgrins.github.io/spectrum/ :) – twain Nov 25 '14 at 06:50
  • Thanks @twain... I think this should do :) – Reddy Nov 25 '14 at 09:02