Html – unable to get spectrum colorpicker working


I am trying to implement the spectrum colorpicker

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>
 <meta charset="utf-8" />
   <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>
        color: "#f00"

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

Best Solution

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

$(document).ready(function() {
      color: "#f00"

Works fine with the correct execution order:

Notice how this: 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.