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

Color Picker Control for your Web site – A HTML Component (HTC)

By , 28 Jun 2003
 

Sample Image - WebPalette.png

Sample image - NamedColors.png

Sample image - SystemColors.png

Sample image - CustomColor.png

Introduction

When I look at the code project articles for color picker control, it has bunch of excellent color picker controls but all are rich-client controls written in MFC, .NET, etc. But no one has written for web environments (thin-clients). If I search web for free ‘web based’ color picker controls, I have to invest lot of money for this. Some sites are providing the controls freely but not looking good. So, here I have tried my best to implement color picker control for web environments. This Color picker control is fully written as a HTC component by using HTML and DHTML.

To learn about HTC please visit:

Special Features

  • Fully functional at client side (pure thin client) and no round trips to the server
  • Reusable HTC Component. So it takes all the advantages of HTC
  • Advanced controls like Tab Control, Tab Pages, Sliders are implemented in this HTC as a normal html pages
  • Look and Feel UI for picking all types of color combinations
  • Color navigations divided into four different regions such as Web palette, Named colors, system colors, custom color (exactly like a Visual Studio.NET IDE Color Picker style)
  • All controls are created at run time and optimized for speed
  • Full "interactive help" like tool tips, descriptions provided to all tab pages

Limitation

At present, only IE 5.0 or later browsers support this HTC technology. Microsoft is still waiting for World Wide Web Consortium adoption. So, to successfully deploy this control on a Web site, a browser detection routine is required to ensure the user is running a version of IE 5.0 or later before launching the components.

Files

This control pack contains the following 4 files :-

  • ColorPicker.htc : Core component contains all business logic implemented by myself.
  • ColorPicker.htm : Html page will be displayed in dialog box and it has one instance of the above ColorPicker.htc component.
  • mpc.htc : Multipage control (tab control for web) implemented by Microsoft
  • MyWebPage.htm : Sample web page using color picker control
     

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

Venkatakarthikeyan Natarajamoorthy
Software Developer (Senior)
United States United States
Member
Venkat Nataraj works as a Technical Consultant for GE Healthcare, USA. Earlier, he worked as a Software Tech Lead for Dell Inc, System Analyst for Satyam Computer Services and Software Engineering Consultant for GE Power Systems, Bently Nevada. He is an MCSD.NET early achiever. He has been working in the last 11+ years in software design and development of leading-edge business solutions with various development tools, technologies, platforms, and architectures. Here is the latest certifications by him:
 
• General Electric (GE) Certified GE Green Belt in Six Sigma
• Microsoft Certified Professional (MCP)
• Microsoft Certified Application Developer for Microsoft .NET (MCAD.NET)
• Microsoft Certified Solution Developer for Microsoft .NET (MCSD.NET)
• MCSD.NET Early achiever
• Brainbench Certified Visual C++ programmer
• Computer Society of India (CSI) awarded first place in the inter-college Computer Quiz Competition
• Computer Society of India (CSI) awarded first place in the inter-college Software Contest
• Received “Process Innovation” award from Dell Inc
 
He spends his free time with music, watching hollywood movies and Sujatha's stories. His favorite musician is Ilayaraja. Bringing real music to his soul and heart. Hariharan is his most favorite singer.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralFirst Bangladeshi Minilab Web Site, www.minilabbd.commemberminilabbd4 May '09 - 5:15 
First Bangladeshi Minilab web site,
Live webcame, Live TV, news, etc
QuestionHow to use this control in my project??memberckietmca1 Jan '08 - 23:40 
How to use this control in my project??Confused | :confused:
AnswerRe: How to use this control in my project??memberckietmca8 Jan '08 - 20:16 
Hi
After doing some R&D I got the way to use in my project.Its so simple simply add these file .htc and .html in your project and call a function (java script) on your invoking control. Take help of java script code from source view code in running sample.
 
Happy coding!!! Smile | :)
GeneralDoes function in FirefoxmemberDavid Rodecker19 Apr '06 - 21:26 
DHTML compatibility isn't extended to Firefox. Tried moz to no avail.
 
-dave

GeneralRe: Does function in FirefoxmemberSaad Hasan5 Oct '06 - 23:34 
i just changed javascript function ShowColorPicker and now it is working in firefox i also changed the fuction input parameter with textbox name(to be filed)
 
function ShowColorPicker(field)
{
document.getElementById(field).value = window.showModalDialog('ColorPicker.htm',document.getElementById(field).value,'dialogHeight:455px;dialogWidth:370px;center:Yes;help:No;scroll:No;resizable:No;status:No;');
}
GeneralRe: Does function in Firefoxmemberwebber12345622 Jun '07 - 9:13 

tried to use it, but fails in ff2.0 and IE7
 
javascript and htc code throws numerous error messages
 
===========================
 
Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
 

===========================
 
cpicker.fnSetGivenColor is not a function
GeneralDoesn't Seem to work in IEmemberchris lasater20 Mar '06 - 8:28 
I opened the ColorPicker.htm file nad the whole thing looks broken. Looks like two different views have gotten mangled together. I am using IE 6.0
 
Chris Lasater
http://www.geocities.com/lasaterconsult
AnswerRe: Doesn't Seem to work in IEmemberViper300026 Nov '06 - 23:49 
here is a great web server color picker that works on all browsers, i like it very much.
 
http://www.xcess.info/xcesscolorpicker
 
Developper Machine
Newsvery good !but……memberjerrie_118 Jan '06 - 14:38 
this articles is very good ,and it is easy to apply our application.but when l apply this project,some problem show that the range of the basic color in the Custom Color TabControlPage is over.exmple:just as our know,the max value is 255 ,but in this articles the max value is 260,so there is some javascript error!
 
Confused | :confused:
Generalcolor pickermemberhitman845 Dec '05 - 4:33 
Suspicious | :suss:
very handy tool indeed!
earlier i was using a similar tool which can be downloaded here
 
http://www.pagetutor.com/pagetutor/makapage/picker/picker.zip
 
pradeep
GeneralRe: color pickermemberVenkatakarthikeyan Natarajamoorthy12 Sep '06 - 1:11 
The thirty party control you are talking about is entirly different than this one. This is pure HTML/DHTML development can be used in the web sites. But the one you have pointed out is the EXE application (No source code; since this EXE is from third party) cannot be used in web sites. Also the UI design, architecture, technology, users everthing different.
 
Venkatakarthikeyan Natarajamoorthy

QuestionAnyone tried using this in Mozilla with moz-behaviors?membermikebridge15 Nov '05 - 12:15 
Hi-
 
I fooled around with this for a bit, but it's a bit beyond me. Has anyone else tried to get this working under Dean Edwards' "moz-behaviors"?
 
http://dean.edwards.name/my/examples/moz-behaviors/
 
Thanks,
 
-Mike
AnswerRe: Anyone tried using this in Mozilla with moz-behaviors?memberwebber12345622 Jun '07 - 9:11 
tried to use it, but fails in ff2.0 and IE7
 
javascript and htc code throws numerous error messages
 
===========================
 
Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.


===========================
 
cpicker.fnSetGivenColor is not a function
 


GeneralVery goodmemberponto13 Oct '05 - 11:29 
I saw the code and the idea is briliant, i already made something like this but was in VB6, almost the same, never think was possible with HTML, never hear about HTC, but from now on will see and work about that, OO (Object oriented) and Javascript can do litle miracles, all the way, thanks....
General.comquerymemberdevraj7007@yahoo.com5 Sep '05 - 22:13 
Confused | :confused: sir please do tell me how to run this fantastic program as i have downloaded it but still its asking for HTC which i m not able to get it so do help me and tell me the whole procdure...
 
Thank u
 
Waiting fro reply
 
puneet
 
puneet
Generalquerymemberdevraj70075 Sep '05 - 22:12 
Confused | :confused: sir please do tell me how to run this fantastic program as i have downloaded it but still its asking for HTC which i m not able to get it so do help me and tell me the whole procdure...
 
Thank u
 
Waiting fro reply
 
puneet
 
puneet
GeneralBravomemberAbishek Bellamkonda20 Jun '05 - 21:08 
Sorry, i saw your control couple of years ago, its really great one. We are using it well.
 
Abi ( Abishek Bellamkonda )
My Blog: http://abibaby.blogspot.com
=(:*
GeneralHtmlmemberShahrose30 Apr '04 - 16:57 
TO
This site master,

I want to creat a web site for peoples i have no idea to how to creat a web site. Please sent me html source. and also sentme informtion how to mke your own web site on Internet.
Thanks and Please
 
Shahrose Khan
GeneralI like this forum!memberquocnho29 Jan '04 - 17:52 
I'm a small vietnamese student. I like to study informatic. It's my passion. And now I want to build for my class a forum. But still now my knowlege about that is not enough. Can you help me. Thankyou very much D'Oh! | :doh: in advance.
 
quocnho
GeneralCool ! Kudos to VN.memberEtchEmKay20 Nov '03 - 20:24 
I've been looking at HTC for only a couple of days now. But, seems to me like a promising technology. Good Work on the Color-Picker VN.
 
Cool | :cool:
 
Hey people .. Any link to other reference material on HTC will be greatly appreciated. Thanks.
GeneralRe: Cool ! Kudos to VN.memberElsen27 Apr '05 - 0:49 
Indeed its promising technology because it enhances html usability and that bulk of Activex controls.
 
Activex est morte vive le Htc...;)
QuestionInternationalization of HTC?sussklh71729 Sep '03 - 19:42 
This and many other HTC objects are great for re-use and minimized coding when in IE environment, however, they are not good for globalization if the HTC requires text. Anyone have any experience or nifty ideals to support say German, Japanese, and English using the same HTC code? The same concept applies to other items such as .js included files (where a prompt is desired) or .htm(l) files where we show static data but need all languages supported.
 
Currently we are using custom tags and loading into a .NET globalization engine that replaces all custom tags with the proper text, however, we must "compile" this each time we want to debug/test and also outputs separate files for each language. Any ideas be great.
 
Thanks,
 
K
GeneralExcellent ControlmemberGhanashyam1 Jul '03 - 20:52 
Cool | :cool: Extremely thoughtful approach for ServerSide frustated developers!
GeneralWonderful ControlmemberNavin_2000330 Jun '03 - 20:59 
Excellent work, whoever it is. Great work. Superb Work, i really liked the control. U seem to be a great guy.Big Grin | :-D
GeneralGreat Control... No DiscussionmemberJarrett Vance30 Jun '03 - 8:35 
I rated this article a 4 because it seems to me there must be some interesting code involved. Why not pick out some of the most interesting code snippets in the solution and discuss them. This is code project. Otherwise great job [guy with long name]
GeneralRe: Great Control... No DiscussionmemberRichard A. Johnn10 Jul '03 - 1:01 
Agreed. You still received a 5 from me, but delving deeper into the code snippets would be greatly appreciated. Excellent work!
 
- RAJ ( RTFM )
GeneralExcellentmemberNikolai Teofilov30 Jun '03 - 6:04 
Cool | :cool:
GeneralRe: ExcellentsussAnonymous31 May '05 - 23:50 
Hi!! can u teach me if how to create website because i have no idea for create this. pls?
GeneralFantastic HTML controlsussAnonymous29 Jun '03 - 21:20 
Really this author is very brillant. I love this control and pure object oriented implementations instead of junk of jscript code
GeneralVery cleveradminChris Maunder29 Jun '03 - 3:33 
Some very creative HTML and DHTML techniques. I especially love the colour range selectors using the scroll bars.
 
cheers,
Chris Maunder
GeneralRe: Very cleversitebuilderUwe Keim29 Jun '03 - 6:36 
In deed very cool.
 
And this guy seems to be the person with the longest name I've ever seen Big Grin | :-D
 
--
- Free Windows-based CMS: www.zeta-software.de/enu/producer/freeware/download.html
- See me: www.magerquark.de
GeneralRe: Very clevermemberHockey30 Jan '04 - 20:32 
Laugh | :laugh: Laugh | :laugh: Laugh | :laugh: Laugh | :laugh: Laugh | :laugh:
 
His name is rather long
 
The word of the day is legs, let's go back to my house and spread the word Poke tongue | ;-P

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

Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130516.1 | Last Updated 29 Jun 2003
Article Copyright 2003 by Venkatakarthikeyan Natarajamoorthy
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid