Example:
CLICK TO SHOW PICKER AT x:35, y:200
CLICK TO SHOW PICKER AT MOUSE CLICK
To incorporate this into your website, copy this code into your HTML header:
<link rel="stylesheet" href="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/COLOURloversColorPicker.css" type="text/css" media="all" />
<script type="text/JavaScript" src="http://colourlovers.com.s3.amazonaws.com/COLOURloversColorPicker/js/COLOURloversColorPicker.js"></script>
Then, insert this code where you would like the picker to appear. The JavaScript function CLCPHandler is called when the picker is being dragged or is clicked on. It was designed so you would have the most control over how the picker's hex value is used.
You can also set whether or not the picker is initially shown, whether it is draggable, which CSS position it has, and it's initial hex value.
Note: For those who are inclined to do so, this JavaScript can be placed within window.onload().
<div id="CLCP" class="CLCP"></div>
<script type="text/JavaScript">
CLCPHandler = function(_hex) {
// This function gets called by the picker when the sliders are being dragged. the variable _hex contains the current hex value from the picker
// This code serves as an example only, here we use it to do three things:
// Here we style the background for the input as the hex color:
document.getElementById("CLCPUpdateElement").style.backgroundColor = ("#" + _hex);
// Here we get the inverse value of _hex so the text within the text field stays in contrast to the background:
document.getElementById("CLCPUpdateElement").style.color = ("#" + CLCPdec2hex(("0x" + _hex) ^ 0xFFFFFF).toString().CLCPpadHex());
// Giving you control over this function really puts the reigns in your hands. Rewrite this function as you see fit to really take control of this color picker.
}
_CLCPdisplay = "none"; // Values: "none", "block". Default "none"
_CLCPisDraggable = true; // Values: true, false. Default true
_CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute"
_CLCPinitHex = "0039B3"; // Values: Any valid hex value. Default "ffffff"
CLCPinitPicker();
</script>
Feel free to view the source of this page to see how we set up the example picker.
Browser Requirements:
This picker has been tested in Firefox 2.x [Windows and OS X], Internet Explorer 7.x [does not work in earlier versions], Opera 9.x and Safari 3.x [OS X only]