javascript - Spectrum not loading when adding my own settings -

i'm using spectrum color picker plugin. have 2 color pickers showing. want majority of settings same. setting differences color, localstoragekey, , move: function (color). rest of settings should same.

i have 1 class - "full", , 2 id's - "first", "second". settings want both of them in full, , others in id.

the problem is, when add settings first , second, color picker plugin disappears. doing wrong, , how can fix it?

jsfiddle

$(".full").spectrum({      	color: false,          flat: false,          showinput: true,          allowempty: false,          showinitial: false,          showpalette: true,          showpaletteonly: false,          hideafterpaletteselect: false,          showselectionpalette: true,          localstoragekey: false,          showalpha: true,          palette: [              ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],              ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],              ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"]          ]      });        // problem is, when following code gets uncommented:        /*$("#first").spectrum({          color: "green",          localstoragekey: "first",                    move: function (color) {              // perform code          }      });            $("#second").spectrum({          color: "orange,          localstoragekey: "second",                    move: function (color) {              // perform code          }      });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="http://bgrins.github.io/spectrum/spectrum.js"></script>  <link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet"/>        <a href='http://bgrins.github.com/spectrum'>spectrum homepage</a>    <h2>first</h2>  <input type='text' class="full" id="first"/>    <h2>second</h2>  <input type='text' class="full" id="second"/>

you forgot quote orange string. give 1 quote @ start, when should put inside 2 quotes following:

 $("#second").spectrum({         color: "orange",         localstoragekey: "second",          move: function (color) {             // perform code  }  }); 

always perform debugging using available tool such firebug or google chrome web inspector when find error js code.

edit

just found can use extend shorten color picker code:

// define color picker object in variable var rules = {         color: false,         flat: false,         showinput: true,         allowempty: false,         showinitial: false,         showpalette: true,         showpaletteonly: false,         hideafterpaletteselect: false,         showselectionpalette: true,         localstoragekey: false,         showalpha: true,         palette: [             ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],             ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],             ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"]         ]     };  // use , add other key value pair inside color picker $.extend method      // first id     $("#first").spectrum(              $.extend(rules, {         color: "green",         localstoragekey: "first",         move: function (color) {             alert();         }      })     );      // second id     $("#second").spectrum(         $.extend(rules, {         color: "orange",         localstoragekey: "second",         move: function (color) {             // perform code         }         })     ); 

fiddle demo