Color select control (version 4.1)

This is an attempt at a standards-compliant, cross-browser, color select interface widget. It's written in javascript & css, and is fairly modular and customizable. Multiple independent color selects can exist on the same page.

It may be slightly jerky, because this site uses a different javascript library, which competes with the color select for handling browser events. The color select is a stand-alone piece of javascript, not tied to any library. See colr.org for an example of the widget on its own.

Update: Jonas Tampier contributed a javascript fix that fixes strange behavior when the color select is inside an absolutely positioned element. To update, replace your version of color_select.js with the current one.

Update: Andy Smith's code is now used for attaching events. The html elements and associated events no longer need to be specified on the page. The color select creates them its own self.

Update: Cleaned up some things, simplified some things

Update: Cleaned up more things

Example 1 (integrated with a menu)

Choose a color (actually, choose "custom"). Notice how the background color for the "custom" menu item updates in real-time as you adjust the color select.

Example 2 (integrated with a text input)

The color select and the form input are tied together. Change one, and the other automatically updates.

Features:

It works in both Mozilla and IE (Mozilla 1.2, IE 6.0)
It validates! (well, this page doesn't quite validate, but it's not the color select's fault.)
You can have multiple color selects per page!
It's easy to hook up to other page elements (see example 1)
The behavior is as close as possible to a form control. This requires some javascript kung-fu for handling things like mouse dragging.

To-do list:

Keyboard support (it would be nice to use the arrow keys to make fine adjustments)
Fix the bug where dragging the browser scroll bars causes the color select to hide.
Fix the bug where resizing the window doesn't cause the color select window to hide.
Make a more convenient half-size version (or somehow allow arbitrary scaling?).

How it works:

To achieve the smooth gradient, The color select control uses a semi-transparent .png image over a colored background.

While working on the control, I came across this site, which uses the same technique. I didn't use any of their code, but their tool is very similar to mine, and it deserves some credit (even if it doesn't work in IE).

Many people think that IE can't handle semi-transparent .png images. That's mostly correct. But MS' proprietary AlphaImageLoader style element is a workaround. It's a little clunky, but it solves the problem. I'm ok with writing a small amount of browser-specific css. After all, I use mozilla-specific css to get nice rounded corners on my website.

How to use it:

You'll need the following:

The two images used by the select tool: hue_blend.png, and sv_blend.png.

A link to the color_select.css stylesheet (this contains styles for the DOM elements that comprise the color select control):

<link rel=stylesheet href="color_select.css" type="text/css"/>

A reference to the color_select.js file (this contains the class definition for the color_select object, and all functions & methods used by the class):

<script type="text/javascript" src="color_select.js"></script>

Then, in your javascript, you have to create a new instance of the color_select class, and hook up the DOM elements you created to it. You have to hook up each instance of the color select separately.

var cs0 = new color_select('cs0');

Or if you want to supply an initial color:

var cs0 = new color_select('cs0', '#00ff00');

You probably want to hook the color select to the rest of your code somehow.

To do this, define a function called [color_select_id]_change_update(new_color). (and optionally, a function called [color_select_id]_hide_update(new_color). Example:

 function cs0_change_update(new_color) {
window.status = new_color;
}

If you hate to be constrained by function names, you don't have to be:

 function my_awesome_update_o_matic_function(the_new_color) {
window.status = the_new_color;
}
cs0.change_update_function = "my_awesome_update_o_matic_function";   // NOTE-there are no ()

There are two possible update functions - change_update and hide_update - called when the color select changes in value, or is hidden. They both should accept along a single string as the first argument: the current color in hex (i.e. "#FF03E5").

I like to put this stuff in a function, and use

<body onLoad="cs_init();">

setTimeout("cs_init()",200);

Example:

function cs_init() {
  var cs0 = new color_select();

  // spatially attach the color select to an element 
  // (when triggered, it will always appear below this element)
  cs0.attach_to_element(document.getElementById("color_select_icon0"));
 
}

And done!