Gelform builds Web Applications

Crayonbox jQuery Plugin

UPDATE: Check out the examples here:
http://jsfiddle.net/gelform/GdL9b/
http://jsfiddle.net/gelform/fu6Db/




Crayonbox is a really simple color picker. The idea is to make it as simple as possible for the user, while leaving lots of options up to you. Create a textfield you will want to add a crayonbox to. Then select it using jQuery and call the crayonbox plugin. If you want to, you can overwrite the color selection with either color names (red, blue) or color hex codes (#FF0000, #0000FF). You can also specify a preselected color.

Requirements

You need the jQuery Framework and the jquery.crayonbox.js plugin (Or the jquery.crayonbox.min.js minified version). Download and use this jquery.crayonbox.css CSS style sheet, or modify what is defined below in the examples.

What happens

When you apply the crayonbox plugin to an input box, it creates a box of crayons next to it (<span> tags with a class of "crayon") and wraps the whole thing in a <span> tag with a class of "crayonbox". You can use these classes to style it.

Examples

The default example

  1. Create an input with a type of text, like this:

    <input type=”text” id=”defaultExample” />

  2. Then in <script> tags, select the input box with jQuery and apply the crayonbox plugin, like this: 
    
$(document).ready(function()
{
	$('#defaultExample').crayonbox();
});

    (Also view the source of this page for an example)

So your page might look like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery.crayonbox example</title>

		<style type="text/css">
		.crayon {color: #000;
				cursor: pointer;
				border: 1px solid #333;
				float: left;
				font-family: Fixed, monospace;
				margin: 1px;
				text-align: center;
				width: 1em;
		}
		</style>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.crayonbox.js"></script>
		<script type="text/javascript">
		$(document).ready(function()
		{
			$('#defaultExample').crayonbox();
		});
		</script>
	</head>

	<body>
		<p><input type="text" id="defaultExample" /></p>
	</body>
</html>

And here’s what you get:

Custom colors Example

  1. Create an input with a type of text, like this:

    <input type=”text” id=”colorsExample” />

  2. Then in <script> tags, select the input box with jQuery and apply the crayonbox plugin, like this: 
    
$('#colorsExample').crayonbox({
	colors: new Array('#F00', '#0000FF')
});

    Note that I’ve specified an array of colors when applying the plugin. I can specify Hex codes like above, or color names like "red" and "blue".

And here’s what you get:

Additional Options Example

  1. Create an input with a type of text, like this:

    <input type=”text” id=”selectedExample” />

  2. Then in <script> tags, select the input box with jQuery and apply the crayonbox plugin, like this: 
    
$('#selectedExample').crayonbox({
	colors: new Array(
				'#777',
				'#888',
				'#999',
				'#AAA',
				'#BBB',
				'#CCC',
				'#DDD'
				),
	selected: '#999',
	crayonTag: 'button,
	clearButton: true,
	onSelection: function(){
		alert( $(this).find('.coloring').attr('title') );
	}
});

    Note that I specified a color that matches one in the array of colors. The one specified will be auto selected when the page loads. I also specified the crayon tag should be a button instead of a span tag, and that we should have a clear button (the one below with the X). Finally, I specified a callback function that will fire after a crayon is selected. In this case it gives me an alert with the background color.

    Here’s another trick. By hiding the input box (#selectedExample {display: none;}), all the user sees is the color selection.

And here’s what you get:

Selected Text Color Contrast Example

  1. In this example, we’ll use Stoyan Stefanov’s RGB color parser to get the background color in RGB:

    <script type=”text/javascript” src=”rgbcolor.js”></script>

  2. Next, create an input with a type of text, like this:

    <input type=”text” id=”contrastExample” />

  3. Then give it a callback function: 
    
$('#contrastExample').crayonbox({
	onSelection: function(){
		var $selected = $('.coloring', this);
		
		// change color of diamond based on brightness
		var color = new RGBColor( $selected.css('background-color') );
		
		if (color.ok) 
		{
			var brightness = (299*color.r + 587*color.g + 114*color.b)/1000;
			
			if ( brightness < 150 )
			{
				$selected.css('color', '#FFF');
			};
		};
	}
});

And now when you click on a darker color, you get a white diamond, instead of a black one:

Options

Here are all the optional parameters you can define to use with the crayonbox.

Properties

colors:
An array of colors that define your crayons.

Example: colors: new Array('Silver', 'Tomato', 'Orange', 'Yellow', 'Chartreuse', 'DeepSkyBlue', 'Violet')

selected:
The default selected crayon color. This has to be one of the colors defined in your array.

Example: 'Silver'

crayonTag:
By default, each of your crayons will be a span tag. This option allows you to specify a different tag. We suggest button or anchor tags.

Example: 'button'

clearButton:
This option, if set to true, adds an 'X' crayon at the end of your crayonbox, witha class of 'boxlid' (Get it? We're closing the box? Terrible pun.). Clicking this calls the 'uncolor' function, which un-selects a selected crayon, and clears the textbox.

Methods

onSelection:
A callback function that gets called after a crayon is selected.

Example: function(){alert( $(this).find('.coloring').attr('title') );} // alerts the selected color

Additional functions

'Uncolor' function

Call uncolor on your existing crayonbox and it will un-select any selected crayon.

Parameters:

clearTextfield: Boolean If set to true, calling this function will also clear the input field. Default is set to true. It will also clear the default selected color.

History

April, 2011
Version 3
March 27, 2009
Version 2.1
February 20, 2009
Version 2.0
January 20, 2009
Version 1.0

Also check out the jQuery Plugin page.