unable to get spectrum colorpicker working

StackOverflow https://stackoverflow.com/questions/16334779

  •  14-04-2022
  •  | 
  •  

Question

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>
Était-ce utile?

La 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.

Autres conseils

The js 

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

has to go after the input box

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top