Color Picker
We offer two types of color picker: MenuCool Color Picker, and Custom Color Picker. They are simple, easy-to-use, very compact (3KB Javascript), and absolutely FREE to use.
Note: Recently we have also developed a RGBA Color Picker that allows users to select colors with transparency or opacity.
MenuCool Color Picker
The MenuCool Color Picker extends all desired <input> fields in HTML form with a color picker.
Features
- Quick & easy to install
- Pure Javascript (4KB only)
- Support reload in AJAX apps (by calling MC.ColorPicker.reload();)
- Appearance customizable
- Provides event handler when a color is selected
- Supported by all major browsers (including IE 6)
Installation
- Refer to mcColorPicker.js and mcColorPicker.css in the head section of your page
<link href="colorpicker/mcColorPicker.css" rel="stylesheet" type="text/css" /> <script src="colorpicker/mcColorPicker.js" type="text/javascript"></script> -
Add class="color" to desired <input> tags:
<input type="text" class="color" />Usually the desired input is type="text". It can also be type="hidden" if needed.
For ASP.NET, it can be the TextBox control. -
If the color input is to be generated later (e.g. in an AJAX callback), you can include a call MC.ColorPicker.reload(); in the callback:
<script type="text/javascript"> function createForm() { document.getElementById("formContainer").innerHTML = '<input type="text" id="cinput2" class="color" value="#00aa00" />'; MC.ColorPicker.reload(); } </script>
Callback event handler
By default, selecting a color by the color picker will automatically update the value of the related input field. If you want additional tasks to be performed after selecting a color from the color picker, you can use the OnColorChanged event handler.
This handler function has two passed in parameters: the selected color, and the index of the chosen color picker.
The following is the implementation of the OnColorChanged handler for the demo:
<script type="text/javascript">
function OnColorChanged(selectedColor, colorPickerIndex) {
var divA = document.getElementById("divA");
var divB = document.getElementById("divB");
if (colorPickerIndex==0)
divA.style.color = selectedColor;
else if (colorPickerIndex==1)
divB.style.color = selectedColor;
}
</script>
You don't need to implement the event handler if you have no additional tasks when the color is changed.
Other built-in functions/handlers
- MC.ColorPicker.reload()
Can be used when building the color picker dynamically. For details please read Color Picker Ajax Support
- OnColorPickerLoaded event handler
Custom Color Picker
Features
- Allow custom colors in the color palette
- Allow multiple Custom Color Pickers on the same page
- Small size (3kb packed Javascript)
- Can build dynamically (by calling MC.CustomColorPicker.reload();)
- Appearance customizable
- Supported by all major browsers (including IE 6)
Installation
- Refer to customColorPicker.js and customColorPicker.css in the head section of your page
<link href="colorpicker/customColorPicker.css" rel="stylesheet" type="text/css" /> <script src="colorpicker/customColorPicker.js" type="text/javascript"></script> -
Add a color picker to your page by the following HTML markup:
<span class="colorpicker"> <span class="bgbox"></span> <span class="hexbox"></span> <span class="clear"></span> <span class="colorbox"> <b class="selected" style="background:#A9BAD4" title="Light Blue"></b> <b style="background:#A1A4B3" title="Stone Blue"></b> <b style="background:#A49381" title="Sand"></b> <b style="background:#626878" title="Charcoal"></b> <b style="background:#2E436E" title="Navy Blue"></b> </span> </span>Note:- All color cells are defined as <b> tag contained in the span.colorbox. Each color is defined by its background style.
- Elements span.bgbox and span.hexbox are optional. span.bgbox indicates the selected color by its background color, and span.hexbox indicates the selected color by the color cell's title.
- Set class="selected" to the color cell that should be the default selected color.
- You can add multiple Custom Color Pickers on the same page.
Callback event handler
The OnCustomColorChanged event handler can be used to perform any additional tasks.
This handler function has three parameters available: the selected color, the titile of the selected color, and the index of your chosen color picker (you may have multiple custom color pickers on the same page).
The following is the implementation of the OnColorChanged handler for the demo:
<script type="text/javascript">
function OnCustomColorChanged(selectedColor, selectedColorTitle, colorPickerIndex) {
//here we use only one of the passed in parameters: selectedColorTitle
var tShirt = document.getElementById("tShirt");
tShirt.src = "colorpicker/img/" + selectedColorTitle.replace(" ", "-") + ".jpg";
};
</script>
Other built-in functions/handlers
- MC.CustomColorPicker.reload(): can be used to build the color picker on the fly.
- OnCustomColorPickerLoaded event handler