Windows Like Choose Color Dialog

• Download demo project - 8.6 Kb
• Download source - 8.15 Kb

Introduction

I was searching the internet for some JavaScript source for a Windows like Choose Color dialog (thanks to Google for making my work as a programmer easier) but I couldn't find one. May be I have to improve my search skills :). And because I needed it, I had to write it myself :(. This is the solution that I came up with, may be it is not the best, but it works. I have tested it with IE, Mozilla and Netscape, and it seems to work fine! So enjoy it, but be careful, I am not the best programmer in the universe :). So let me know if there are any errors!

Background

I used the Windows idea for a color dialog because people are used to that kind of a dialog. So the first thing I did was to find the Hue Sat Lum to RGB conversion method and luckily Microsoft has had published their implementation of it in their website, which at the beginning, I was thinking was not working properly because of the floating point rounding operations, but it turned out that if all the operations are forced to be in integers, everything seems to work quite pretty.

Using the code

There are two files that do the work:

• color_conv.js - which contains the functionality.
• color_dialog.htm - which contains the user interface.
• pix - the folder which contains the slide images.

I hope the code is easy to use. You have to write your own callback function in your HTML which will invoke the ColorDialog.

function OnChangeColor(color,param){
    if(color){
        if(param== ... ){
        }else if(param== ... ){
        }
    }
}

This function will be called on closing the dialog, and color will contain the value of the color (e.g.: '#ff00ff') that was chosen, and param is the user defined value to identify the call. It can be whatever the user sets when invoking the dialog.

The dialog is called by:

fnShowChooseColorDlg(color,param,path);

where:

• color is the color that we set for the dialog to be displayed initially.
• param is the user parameter returned when we choose the color to identify the call.
• path is the relative path to color_dialog.htm which represents the user interface of the color dialog.

That's why you should also include the JavaScript file which implements that function.

<script language="javascript" src="color_conv.js"></script>

So enjoy using this code if you understand anything :)