Color Dialog

This library implements a drop-down color selector for HTML + JavaScript webpages, with support for transparency. Here is a live demo:

Select Color

---

⇓ Download Zip (6 KB)  (Open Source - MIT License)

Project Files:

---

Usage

First create a ColorDialog object, and then show it attached to an HTML element in response to an event. When the user closes the box and selects a color, it will cause another event.

var cd = new ColorDialog();

cd.show(mybutton_id_string);

cd.onclose = function(css_color) {
alert(css_color);
};

Functions

// ----------------------------
// Constructor - Constructs a dialog object.
//
// parent_elem - [Optional] Either a string ID or a DOM element object. The dialog will be displayed beneath that element on the screen.
//
// Returns - A ColorDialog object.

new ColorDialog(parent_elem);

// ----------------------------
// Function - Shows the dialog.
//
// parent_elem - [Optional] Either a string ID or a DOM element object. The dialog will be displayed beneath that element on the screen.
//
// Returns - None

cd.show(parent_elem);

// ----------------------------
// Function - Closes (hides) the dialog.
//

cd.hide();

// ----------------------------
// Function - Gets the currently selected color.
//
// Returns - A CSS color string of the currently selected color.

cd.getColor(parent_elem);

// ----------------------------
// Function - Gets the currently selected color.
//
// Returns - An RGBA array of color components in this order: [R, G, B, A]

cd.getColorRGBA(parent_elem);

// ----------------------------
// Function - Sets the currently selected color.
//
// color - Either an array of RGBA components or a CSS "rgba(#, #, #, #)" format string.
//
// Returns - None

cd.setColor(parent_elem);

// ----------------------------
// Function - Checks if the dialog is currently open.
//
// Returns - true only if the dialog is currently open.

cd.isShown();

// ----------------------------
// Event - Called when the dialog is closed.
//
// css_color - A CSS color string of the currently selected color.
//

cd.onclose = function(css_color) {};

// ----------------------------
// Event - Called when the dialog is closed.
//
// css_color - A CSS color string of the currently selected color.
//

cd.onchange = function(css_color) {};