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