ColorMeBad requires jQuery.
-
Place the
colormebaddirectory in your web server's path. -
Put a reference to
colormebad.jsin the<HEAD>tag of your HTML document. It might look like this:<script type="text/javascript" src="js/colormebad/colormebad.js"></script>
To attach the color selector to an element, call the colormebad function on the element's selector while passing some handlers for event callbacks. The following example binds a ColorMeBad color selector to an #all4love element:
$('#all4love').colormebad({
show: function() {
// do this when selector opens
// sets initial selector color to background color of #all4love element
$(this).colormebad('setColor', $(this).css('background-color'));
},
change: function() {
// do this when color selector cursor is moved (this is called a lot)
// changes the background-color of the #all4love element as the
// color seletor cursor is moved
$(this).css('background-color', $(this).colormebad('getColor'));
},
close: function() {
// do this on selector close
}
});