Color Picker

 

MenuCool Color Picker





OnColorChanged event
is used to change the print
text color on the Tee.
Custom Color Picker
Mr.
Tee

Custom Color Picker


OnCustomColorChanged event
is used to change the Tee's color.
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.

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 (3KB only)
  • Support reload in AJAX apps
  • Appearance customizable
  • Provides event handler when a color is selected
  • Supported by all major browsers (including IE 6) Cross browser color picker

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.

Custom Color Picker

Features

  • Allow custom colors in the color palette
  • Allow multiple Custom Color Pickers on the same page
  • Small size (2kb packed Javascript)
  • Appearance customizable

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>

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered