Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

unable to get spectrum colorpicker working

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>
like image 553
Barry Watts Avatar asked May 02 '13 09:05

Barry Watts


1 Answers

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.

like image 142
George Reith Avatar answered Oct 21 '22 08:10

George Reith