Click here to Skip to main content
Click here to Skip to main content

Windows Like Choose Color Dialog

, 1 Dec 2005
Rate this:
Please Sign up or sign in to vote.
How to implement a Windows like Choose Color dialog with HTML and JavaScript.

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 Smile | :) . And because I needed it, I had to write it myself Frown | :( 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 Smile | :) . 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 Smile | :)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Veselin Tenev
Software Developer (Senior)
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
QuestionIt is not work in Google crom PinmemberMember 77497308-Jul-13 2:40 
GeneralRe: It is not work in Google chrome [modified] PinmemberVeselin Tenev6-Aug-13 0:21 
QuestionYordan Georgiev Pinmemberalben4ik7-Feb-10 11:12 
GeneralAccept button not working on Firefox PinmembernILaRT13-Oct-08 0:11 
GeneralRe: Accept button not working on Firefox PinmemberVeselin Tenev13-Oct-08 5:20 
GeneralRe: Accept button not working on Firefox PinmembernILaRT13-Oct-08 6:30 
GeneralRe: Accept button not working on Firefox PinmemberVeselin Tenev13-Oct-08 6:52 
GeneralRe: Accept button not working on Firefox PinmembernILaRT13-Oct-08 20:57 
GeneraldialogArgument PinmemberMostafaHamdy7-Feb-07 1:17 
Hello
at the beginning many thanx about your valuable work, but I have some problem with it when I try to open this sample with IE7 only I got javascript error sayes the following
"dialogArgument is undefined" in line 869
I tried to solve it with many trials but really faild
if you can please help me in fixing this problem I will be so please for that
regards
Mostafa
mostafa_hamdy@hotmail.com
GeneralRe: dialogArgument PinmemberVeselin Tenev7-Feb-07 23:05 
GeneralWOW YOU are so Great!! Pinmemberveronyiu30-Nov-06 17:32 
GeneralOptimizition session PinmemberYoava33330-Nov-05 5:36 
GeneralWow Pinmemberlothar4229-Nov-05 23:53 
GeneralSuggestion Pinmembershaul_ahuva28-Nov-05 1:49 
GeneralUpdate PinmemberVeselin Tenev26-Nov-05 9:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 1 Dec 2005
Article Copyright 2005 by Veselin Tenev
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid