Menu
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>
553
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.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
