In Tips, Tutorials Jan 27, 200927
jQuery Color Picker
Gone are the days of having to manually enter in hex codes to specify colors: with jQuery UI’s color picker, you can make your web application pick colors as smoothly as you would in desktop applications like Photoshop. When coupled with the visual appeal and functional benefit of color pickers, the ease of using jQuery UI’s gadget is something that’s hard to pass up.
The Example
Getting Started
The color picker can be downloaded from the jQuery UI download page and then included in our page using the <script> tag. Furthermore, the CSS file that is inside the default theme folder should be included, as should all of the images. There are a fair number of items to include for the color picker, but they are needed to form the interface. These should be placed within your <head> tags:
<link rel="stylesheet" href="ui.colorpicker.css"/>
<script language="JavaScript" src="jQuery.js"></script>
<script language="JavaScript" src="jQuery.colorpicker.js"></script>All we need to do to make use of the color picker gadget is to call the .colorpicker function on a form field or div to begin:
$('#picker').colorpicker({ flat: true });By attaching the picker to just a div and specifying the flat parameter to be true, you should see the following:
It is worth an honorary mention that the eventName parameter can be set to the name of the event that should trigger the opening of the color picker. That is, you can specify to have the color picker show up on mouseover instead of the standard click.
Wrapping Things Up
By placing the hex code into the text field at the end, we ensure that we can access the hex code from normal forms and JavaScript alike. By using standard convention with the form handling, this method also ensures that there is a safe fallback to users who have JavaScript disabled. The following is the completed example using the hide event to return the hex code, and then making use of that hex code to style the page.
Tutorial kindly written by Nathan Wong
27 Comments
Jan 27, 2009
Is this a plugin or a part of jQuery UI? I don’t see this on the jQuery UI download page. How about a link?
Thanks!
Jan 27, 2009
[...] jQuery Color Picker | Design Reviver a nice look into jQuery Color Picker! (tags: javascript jquery color picker) [...]
Feb 2, 2009
I think this is a really good colour choice. I really want to expand on my jQuery knowledge. Do you have any more jQuery information.
Feb 2, 2009
really nice jquery tut! I am always amazed of JS capabilities, thanks!
Feb 3, 2009
I see you added a link to the jQuery UI homepage. However, I cannot for the life of me find a download for the color picker on this page. Was it previously included with jQuery UI but has been moved into a plugin or something?
Can you shed some light on this for us? Thanks.
Feb 4, 2009
nice tool, thanks alot
Feb 6, 2009
Download available at – http://www.eyecon.ro/colorpicker/
Feb 7, 2009
This is great. Thanks for sharing!
Feb 12, 2009
hey.. i can’t find the plugins..
hellppp
Feb 15, 2009
Can’t find the plugin either. Would love to have it?
Feb 20, 2009
Great tool.. Thanks for sharing..
Feb 21, 2009
Very useful article ! I wold like to see more article about jQuery , since this is a low documented subject , in my opinion . Best regards, and congratulations for this nice looking article .
Mar 16, 2009
Great! Thanks for sharing!
Apr 7, 2009
Thank you for the explanation
This post encouraged me to finally have a go at mixing up some JQuery into my Ruby on Rails project.
In my attem to ge this working though I have coe unstuck with your first example.
$(‘#picker’).colorpicker({ flat: true });
Ater adding this into my aspplication.js file and setting up the approriate div in my partial viewe I find I am facing an ‘EYE’ is not defined error.
I have a had some input from the Rails Forum regarding this here
http://railsforum.com/viewtopic.php?pid=93201#p93201
but I would like to know if anyone has any idea as to what could cause this problem?
Thanks
James
Apr 7, 2009
Problem sorted.
I had not taken account of the case sensitive natiure of jquery in rails and I also had not sorted out the noConflicts correctly
Apr 18, 2009
Great! Thanks for sharing!
May 3, 2009
it is nice plugin but it is not compatible with IE.
Jun 15, 2009
This may comes in handy. Thanks for sharing.
Jun 16, 2009
Great work, but don’t work with IE6.
Jun 20, 2009
[...] Links : Demo & Download [...]
Jul 19, 2009
very intersting jquery tips
Jul 24, 2009
not working for IE7
Jul 31, 2009
thanks a lot! this will be so useful!
Aug 15, 2009
thanks for sharing it with us.it contributes to our knowledge enhancement.thanks
Sep 13, 2009
[...] Read the original here: jQuery Color Picker | Design Reviver [...]
Jan 6, 2010
http://www.eyecon.ro/colorpicker/
use this plug in.
its far better than what shown on this page. basically the same. BUT it supports cross browsers. while this page doesn’t works in IE
Feb 19, 2010
[...] Tutorial Tutorial Page [...]
Leave a Comment