Html – unable to get spectrum colorpicker working

color-pickerhtmljquery

I am trying to implement the spectrum colorpicker http://bgrins.github.io/spectrum/

I have the spectrum css file and the spectrum js file and also jquery 1.9.0 file in the same folder as the html file.

All I am getting is a input box on the screen and no colorpicker. I have tried in firefox/chrome and IE but nothing.

I cant see anywhere where it says I need any additional files

Can anyone please help as I think its probably something really obvious

here is the code of the html file

<!DOCTYPE html>
 <html>
 <meta charset="utf-8" />
 <head>
   <link rel="stylesheet" type="text/css" href="spectrum.css ">
   <script type="text/javascript" src="jquery-1.9.0.js"></script>
   <script type="text/javascript" src="spectrum.js"></script>
   <script>
     $(".my_color").spectrum({
        color: "#f00"
     });
   </script>
  </head>

  <body>
   <input type='text' class="my_color" />
  </body>
  </html>

Best Solution

Make sure to call your scripts after the DOM is finished loading e.g.,

$(document).ready(function() {
   $(".my_color").spectrum({
      color: "#f00"
   });
});

Works fine with the correct execution order: http://jsfiddle.net/xqdBd/

Notice how this: http://jsfiddle.net/xqdBd/1/ doesn't work anymore as the JavaScript is called before the DOM has finished loading.

Another problem is here:

<link rel="stylesheet" type="text/css" href="spectrum.css ">

Notice the extra space at the end of "spectrum.css ", that or your JavaScript files aren't being loaded. Without seeing the page you are using it is impossible to tell.