John Dyer

Technology and web development in curly bracket languages {Javascript, C#, ActionScript}

PhotoShop-like JavaScript Color Picker

by John Dyer 27. September 2007 08:47

Update: Many people have noted "it looks like [picker X]" and they are right: there are tons of pickers out there (I listed a few in the original post). The main difference in mine is that it has all 6 picking options (H,S,V,R,G,B) not just Hue. I haven't seen one that does that and this is a fun way of showing what JavaScript can do.
-----

There are a lot of nice JavaScript color pickers out there (colorjack, colourmod, yahoo, dojo, nogray, mootools), but none of them has a full HSB and RGB options of Photoshop's picker. Some pickers try to generate the entire color map in JavaScript by drawing a 256x256 grid made of divs. This is very slow, which is why color pickers that go the JavaScript route often don't draw the entire map, but instead only 4x4 or 8x8 blocks (ColorZilla).

The other options is to use transparent PNGs and opacity to fake the maps. A few years back, I did this, but it didn't have RGB and was Firefox and IE only (excellent tutorial here). To create the color mixing, the larger map is made of two layers and the vertical slider has four layers (two are used for H, S, or B; four layers for R, G, or B). Some others pickers use this method for a hue map, but don't include the other maps (S,V,R,G,B). The JavaScript is made up of some color methods, a slider control, a handler for input, and the ColorPicker object to put it all together. Click the image below to try it out:

CropperCapture[11]

 

Tested on IE5.5, IE6, IE7, FF2, Opera 9, Safari 2. It would probably need some modification depending on use, but you can download it here: Color Picker

Comments

9/28/2007 5:44:37 PM # mud mud United States | Reply
Cool color picker! Reminds me of how the Colors of the Rainbow plugin for Opera was programmed (http://widgets.opera.com/widget/4134). I ran into a little bug however on Firefox on OSX, when you pull the circle (in the square on the left) about 75% down it jumps to the right... Otherwise, really nice plugin!
9/30/2007 12:16:53 AM # John Dyer John Dyer | Reply
mud, that Opera plugin looks great! Thanks for the tip on the OSX bug. I'll check it out.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
9/30/2007 8:07:51 PM # Benjiiim Benjiiim France | Reply
Hello,

Very good job !
But I have the same bug than mud on Vista + IE7

Thanks !
10/4/2007 6:33:12 AM # Mathieu 'p01' Henri Mathieu 'p01' Henri | Reply
" Some pickers try to generate the entire color map in JavaScript by drawing a 256x256 grid made of div. "

o_Õ ... Seriously ? What kind of silly person would do that ? PNG and opacity are pretty obvious for a color picker.

Nice job on doing all the conversions.

Would be a lot nicer if it used webForms 2 so that the user can use the arrows keys to change the value of the fields, and if you got rid of the massive Prototype library.
10/4/2007 7:00:32 AM # John Dyer John Dyer United States | Reply
@Mathieu: webForms 2 would be cool, but also would include another library. I would be relatively easy to remove prototype from this if that was a big consideration.

@justin: that's a nice picker too, but it only has a hue map. None of the other options (S,V,R,G,B) are in that one.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/4/2007 7:16:10 AM # Mathieu 'p01' Henri Mathieu 'p01' Henri | Reply
webForms 2 don't require an extra library. All you have to do is add an event listener for the 'input' event to update the position of the 2 cursors.
10/4/2007 7:40:41 AM # pingback ajaxgirl.com | Reply
Pingback from ajaxgirl.com

Ajax Girl  » Blog Archive   » Photoshop Color Picker
ajaxgirl.com's last post: www.ajaxgirl.com/2009/07/22/skype-unleashes-a-%e2%80%9csuper-secret%e2%80%9d-project-a-cheap-headset/" rel="nofollow">Skype Unleashes A “Super-Secret” Project: A Cheap Headset
10/4/2007 9:12:38 AM # John Dyer John Dyer United States | Reply
@Mathieu: I was referring to the implementation of WHATWG webforms 2 on google code (http://code.google.com/p/webforms2/). Are you just suggesting adding up and down arrow support directly? That sounds like a cool idea. I'll look into it.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/4/2007 9:19:36 AM # joe larson joe larson United States | Reply
brilliant
10/4/2007 10:10:20 AM # pingback javascriptnews.com | Reply
Pingback from javascriptnews.com

Javascript News  » Blog Archive   » Photoshop Color Picker
10/4/2007 11:27:05 AM # sudopeople sudopeople United States | Reply
I love this thing! Well done. I previously used colorjack, which is great but full of quirks. For one thing, it used common variable names which step all over other libraries and my own code and is insanely CSS oriented, so trying to change its layout is a huge pain that's basically hours of trial an error.  I really like how you used tables unlike all the standardistas out there that think tables are "wrong." This colorpicker is the best I've seen so far.  The one thing that bothers me is the difficulty in writing a colorpicker that can "start" on any color.  I foresee this as quite a task, maybe a fun challenge.  For instance, you set you colorpicker to start on #FF0000 and you set the background to red as well. If I wanted it to start on a custom color, like one that was in a database for instance, maybe #0000FF, the color box would be correct but the background of the picker would be red, or maybe white. Basically, you'd need an algorithym to detect what each color's background would be (the reverse of how it normally works).
10/4/2007 12:43:01 PM # Justin Etheredge Justin Etheredge United States | Reply
Ingenious! Bravo!
10/4/2007 12:56:47 PM # John Dyer John Dyer United States | Reply
@sudopeople, you can instantiate the ColorPicker using:

  var cp = new ColorPicker('cp1', {startMode:'h', startHex:'ff0000'});

to set the starting color and mode.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/4/2007 2:51:34 PM # JonWallsten JonWallsten Sweden | Reply
Great job!!!
Precisly what a wanted!
Thanks alot!
10/4/2007 3:16:35 PM # Jon Wallsten Jon Wallsten Sweden | Reply
Btw, where do I put the:
var cp = new ColorPicker('cp1', {startMode:'h', startHex:'ff0000'});
to get it to work?
Thanks fot youtime, JOn
10/4/2007 10:28:36 PM # pingback blog.napyfab.com | Reply
Pingback from blog.napyfab.com

napyfab:blog» Blog Archive
» links for 2007-10-05
10/4/2007 11:20:07 PM # John Dyer John Dyer United States | Reply
@Jon, in the default.html page in the download, look in the JavaScript near the end of the page:
Event.observe(window,'load',function() {
  cp1 = new Refresh.Web.ColorPicker('cp1', {startMode:'g', startHex:'ffcc00'});
});

John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/5/2007 8:48:54 AM # Jon Wallsten Jon Wallsten Sweden | Reply
Thanks, i managaed to figure it out yesterday! Smile
Just a few thingsSmile
Why is it:
"hex = hex.replace(/[^A-F0-0]/g, '0');"
istead of:
"hex = hex.replace(/[^A-F0-9]/g, '0');" ?

And one more thing. I have done an extra box with the starting color, so you can go back to the start color easy.
How do i in the simpliest make the deafult color as the choosen one?
Atm i just reload the page. But there must be a simplier way! Smile
, Jon
10/5/2007 9:48:51 AM # Jon Wallsten Jon Wallsten Sweden | Reply
Here it is, if any reader want to have a clickable startcolor.

<div id="cp1_Preview" style="background-color: #startcolorofyouchoice; width: 60px; height: 29px; padding: 0; margin: 0; border: solid 1px #000;border-bottom:0px;">
                <br />
              </div>
                            <div id="cp1_Start" style="background-color: #startcolorofyouchoice; width: 60px; height: 30px; padding: 0; margin: 0; border: solid 1px #000;cursor:pointer;" onClick="setStartColor();">
                <br />
              </div>


function setStartColor()
{  
  document.getElementById("cp1_Hex").value ="YouStarthexValue";

  cp1._cvp = new Refresh.Web.ColorValuePicker("cp1");

  // get an initial value
  cp1._cvp.color.setHex("YouStarthexValue");

  cp1.positionMapAndSliderArrows();
  cp1.updateVisuals();
}
10/6/2007 11:02:51 PM # pingback webmasterlibre.com | Reply
Pingback from webmasterlibre.com

Webmaster Libre | Un colorpicker como el del Photoshop
webmasterlibre.com's last post: www.webmasterlibre.com/.../" rel="nofollow">CSS 3, please! Un generador de propiedades CSS3 crossbrowser
10/7/2007 9:15:31 AM # pingback thethirdpart.com | Reply
Pingback from thethirdpart.com

  javascript 拾色器 by The Third Part
10/7/2007 5:49:37 PM # pingback tatuin.biz | Reply
Pingback from tatuin.biz

Script - Cuentagotas como en el Photoshop | Tatuin - Mi mundo para Lelos
tatuin.biz's last post: www.tatuin.biz/.../" rel="nofollow">A todas las grandes mamis
10/8/2007 8:15:57 AM # Sergio Sergio Chile | Reply
Amazing!! is fantanstic and the photoshop look-a-like gives a advantage tip to this tool.

Thanks and cheers!!!!!
10/8/2007 2:50:16 PM # pingback daniblog.com | Reply
Pingback from daniblog.com

El Color Picker más Completo de la Red
10/8/2007 5:53:47 PM # idearat idearat | Reply
John, nice work. No license. What license do you intend this to be available under?


10/8/2007 7:07:54 PM # Nancy Nancy United States | Reply
this is great.  After downloading it, I made it into an AIR app (just for my own use of course) so now it's on my desktop.

Great job!
Nancy
10/8/2007 7:17:52 PM # John Dyer John Dyer United States | Reply
I added an MIT license to the code and download. Have fun!
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/8/2007 11:22:50 PM # mrrau mrrau Poland | Reply
: ))
Your face is everywhere, hehe.
10/9/2007 12:52:58 PM # pingback phpblogger.net | Reply
Pingback from phpblogger.net

phpblogger.net:   Javascript Farbauswahl wie bei Photoshop - Der frische PHP Blog
phpblogger.net's last post: www.phpblogger.net/.../" rel="nofollow">SVN: Via Shell vergleichen
10/9/2007 7:47:55 PM # oct oct Germany | Reply
Awesome work!!!

I have a question though: what would need to be done in order to get rid of prototype.js?

Can I do this myself?

TIA
10/9/2007 10:12:49 PM # John Dyer John Dyer United States | Reply
@oct: Of prototype, I'm using the 1) Class.create syntax, 2) the $() function, 3) the Event.observe/stopObserving functionality, and 4) a few positioning methods for the sliders.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/10/2007 1:23:32 PM # oct oct Germany | Reply
John,

thanks a lot for your swift answer.

Reading the above now, let me put it another way: could you provide a version that's independent of prototype? Laughing

I actually hate this phrase but really mean it: keep up your (awesome) good work Smile

Thanks again!
10/10/2007 6:08:22 PM # John Dyer John Dyer United States | Reply
@oct: I probably won't have time to do that. I may make some updates to it soon and I'll look at the prototype code at that time. One person has already ported it to ExtJS...
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/11/2007 1:48:53 AM # Will Gillen Will Gillen United States | Reply
John,

Who ported it to ExtJS?  I would like to see that if possible.  I use ExtJS, and am very interested in this color picker you have creatd.

Thanks!
10/11/2007 2:31:37 AM # John Dyer John Dyer United States | Reply
@Will: someone named "Collin T Miller". Unfortunately I don't have contact information for him. Someone from Ajaxian also put it in an AIR app for desktop use.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
10/11/2007 6:23:16 AM # pingback kobak.org | Reply
Pingback from kobak.org

kobak pont org    » links for 2007-10-11
10/11/2007 7:52:27 PM # Allan Allan Brazil | Reply
Great job, wonderfull research and aplication, tank´s to do the internet more friendly!
Allan's last post: msblogs.com/.../#comment-1323" rel="nofollow">Comment on Microsoft Surface Computing by Callaz3
10/12/2007 1:03:00 AM # Stefan Stefan Germany | Reply
Great job, integration couldn't be easier, works like a charm, thanks!
10/16/2007 9:25:44 PM # jmirkin jmirkin United States | Reply
John, this is exactly what i was looking for. Great work. I haven't had a chance to go through the code yet. I wanted to know if there's a way to resize the colorpicker.
10/18/2007 11:27:56 AM # drewp drewp United States | Reply
@jmirkin, something like this will make it half-size:

<style type="text/css">
              #%(tag)s_ColorMap, #%(tag)s_ColorMap img {
                width: 128px !important;
                height: 128px !important;
              }
              #%(tag)s_ColorMap img {
                margin-top: -256px !important;
              }
              #%(tag)s_ColorBar, #%(tag)s_ColorBar img {
                height: 128px !important;
              }
              #%(tag)s_ColorBar img {
                margin-top: -256px !important;
              }
            </style>

where %(tag)s is the name of the picker instance to resize.
10/19/2007 2:18:54 AM # pingback ashwell.co.za | Reply
Pingback from ashwell.co.za

Marc Ashwell  » Blog Archive   » links for 2007-10-18
10/19/2007 6:34:49 AM # pingback mtnconcept.com | Reply
Pingback from mtnconcept.com

    Free Tools» Blog Archive
    
10/23/2007 12:03:31 AM # Dimitri Tishchenko Dimitri Tishchenko Canada | Reply
Hands down the best colorpicker I have ever seen.  Very clean prototype code.  Thanks you!
10/28/2007 3:52:38 AM # pingback webtodoweb.com | Reply
Pingback from webtodoweb.com

webtodoweb.com  » Blog Archive   » Javascript Color Picker: selección de color estilo PhotoShop
webtodoweb.com's last post: http://webtodoweb.com/?p=200" rel="nofollow">Google Friend Connect en CruzandoLineas
10/30/2007 2:16:07 AM # jonese jonese United States | Reply
For some reason in IE7 when the script runs it shows a syntax error on line 2 col 1. Any idea what might be causing it? i can send the generated HTML if it'll help.
jonese's last post: feedproxy.google.com/.../...lider-Thumb-Values.cfm" rel="nofollow">Flex Quickie: Setting Multiple HSlider Thumb Values
10/31/2007 2:03:47 AM # pingback discount-perfume-hq.com | Reply
Pingback from discount-perfume-hq.com

Womens Discount Perfume » Not perfume emporium but still interesting…
11/1/2007 9:55:35 PM # pingback eatajax.com | Reply
Pingback from eatajax.com

Photoshop like color picker | ajax examples and demos source
eatajax.com's last post: msblogs.com/.../#comment-1323" rel="nofollow">Comment on Microsoft Surface Computing by Callaz3
11/15/2007 1:39:01 AM # Matt Stow Matt Stow Australia | Reply
I get the same Invalid Character (Line 2, Char 1) error in both IE 6 and 7 out of the box. And for some reason, it won't let me debug it in Visual Studio.

Any help would be greatly appreciated.
11/15/2007 1:42:34 AM # Matt Stow Matt Stow Australia | Reply
Also, why can't you paste hex codes directly in? It automatically changes them to something completely different Frown
11/15/2007 2:09:06 AM # John Dyer John Dyer | Reply
@Matt,
I just updated it to the full release of prototype 1.6 (which seems to have fixed the IE issue when accessing through the filesystem) and changed the behavior of the hex box to allow copy and paste. Let me know if that helps.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
11/15/2007 3:27:18 AM # Matt Stow Matt Stow Australia | Reply
w00t! Awesome work John.

Thanks for the speedy response.
11/16/2007 7:14:28 AM # pingback centuryidea.cn | Reply
Pingback from centuryidea.cn

Cloud of May  » Blog Archive   » 强大的web颜色选择组件-PhotoShop-like JavaScript Color Picker
centuryidea.cn's last post: msblogs.com/.../#comment-1323" rel="nofollow">Comment on Microsoft Surface Computing by Callaz3
12/17/2007 1:02:28 PM # Arjun Arjun United States | Reply
Hi,

I've many instances of color picker in a page. When there is a single picker it works fine. However in case of multiple instances in a same page, the picker is behaving abnormal. It does not show up the slider image for some picker and the color values in H S B text boxes shows NAN.

Any help on this?
12/19/2007 3:33:12 AM # Justin George Justin George United States | Reply
You just saved me about twenty hours of work on this, for something that wouldn't have been half as nice. Thanks!
Justin George's last post: illicittech.blogspot.com/.../...nding-on-your.html" rel="nofollow">Pretty (or ugly, depending on your outlook) pictures of the current state of unemployment in the US
12/19/2007 10:22:21 PM # Guus Guus Netherlands | Reply
First of all great work. But I run into a little problem. When I run it local on my laptop everthing works fine, but my server isn't really happy with it...

I get the error "Refresh not defined". See it at http://qr2v39nc5ga2zcgj.com/colorpickertest.html (sorry for the url, its a test server...)

Can you help me out?

Regards.
12/20/2007 12:14:12 AM # Sean Gallagher Sean Gallagher United States | Reply
Hi, looks great and works great on your site.

Although I can't get it working myself. The version you have for download appears to be different than the contents of the demo version you have on your site.

The problem I am running into is that when I view the color picker all I get is the text boxes for the hue, saturation, ect... a white box above that and thats it.

Any help would be greatly appreciated, as this look like a great script.

P.S. I think I have the same issue as Guus (it looks the same  as it does on is server and I get that same error).
12/20/2007 1:23:50 AM # John Dyer John Dyer United States | Reply
@Guss and @Sean, I just updated the download and tested it and it seems to be working for me.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
12/20/2007 4:14:26 PM # Michael Michael Netherlands | Reply
I have the same problem as Guss and Sean. When I try to open the file on my hard drive with firefox or IE it works fine. However, when I open the html on my apache tomcat server, then the webserver only shows a white box when i run the html.
12/20/2007 6:53:01 PM # John Dyer John Dyer United States | Reply
You might try making sure there is no Google analytics code at the bottom of the page. It's not in the download, but if you save the page at /lab/colorpicker/ it will still have the script tags for analytics at the bottom.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
12/21/2007 1:23:09 PM # Guus Guus Netherlands | Reply
So why would that make a difference? I tried to integrate it in our website, which indeed uses google analytics. Is there a conflict of variables or something?

Regards
12/22/2007 3:43:56 PM # Guus Guus Netherlands | Reply
Hmm Tried the updated download. It doesn't seem to work either on the apache server. It does work on my local filesystem. I just uploaded the files to www.qr2v39nc5ga2zcgj.com/test/default.html

Still get the same error... I can't figure out what the problem is. By the way, there is no google analytics code at the bottom...

I really like your color picker and want to use it on our site... Hope you can solve the problem.

By the way I'm not really familiair with javascript, I'm a php develloper...

Regards,
12/24/2007 11:09:16 AM # Harriet Harriet United States | Reply
Hi John - Yours may look like some others, but trust me I have installed and tried over a dozen and yours is the only one that works consistently. I *really* appreciate that you've made this available. I would like to add a small feature and can't get it quite right. I would like to be able to have a different event on the page stuff a hex value in and change everything accordingly. I saw the post above and have tried something like this:

function SetColor(strHex)
{
    document.getElementById("cp1_Hex").Value = strHex;
    cp1._cvp = new Refresh.Web.ColorValuePicker("cp1");
    cp1._cvp.color.setHex(strHex);
    cp1.positionMapAndSliderArrows();
    cp1.updateVisuals;
  
}

but this doesn't quite work right. Can you set me straight about what I should call to reset everything based on a new hex value, once the page is already loaded. Thanks very much again for this great piece of code. - Harriet
12/24/2007 11:09:25 PM # Nate Nate Canada | Reply
The reason others are having issues is due to filesystem case-sensitivity. You named the file with mixed case (ColorPicker.js), but try to load them as all-lowercase (colorpicker.js). This will break things on most operating systems, because colorpicker.js does not exist - only ColorPicker.js does!

Also, your positioning entirely breaks if the page is given a standards-complying doctype, such as HTML 4.01 Strict or XHTML 1.0 Strict. The transitional doctypes work, but those of us using strict doctypes are left hanging in the dark.
12/24/2007 11:26:17 PM # Nate Nate Canada | Reply
As a side note to that, if anybody manages to make this work in standards mode rather than broken quirks mode, please email me at pqscvkrfet at the domain known as gmail dot. com. Forget IE5.5.
12/24/2007 11:38:54 PM # Nate Nate Canada | Reply
Let's make a third comment. ;)

The strict doctype issue is actually just the image display type. All you need to add to your css is "img { display: block; }", and this picker will also work in strict doctypes.

This picker really is great. Even if the insides are a little scary (any javascript that greps the useragent string is frightening). Thanks John, especially for the MIT license!
12/24/2007 11:46:44 PM # John Dyer John Dyer United States | Reply
@Nate, thanks for your comments. I actually wrote this code about 2 years ago, and I have been wanting to clean it up for some time (including adding strict doctype support). Thanks for catching the case issue as well. I'll try to get some of those updates in soon. Merry Christmas!
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
12/26/2007 1:37:36 PM # Asit Asit India | Reply
HI John
I have figure out the web server problem (that blank white box),
The problem is that in your default.html you have written everything in lowercase (colorpicker.js, etc...) but the file name on disk is ColorPicker.js (C and P is in uppercase ). just match the case of all files and check it out
its working

12/26/2007 9:07:52 PM # John Dyer John Dyer United States | Reply
@Asit, @Nate, @Guus,
I've updated the download to include all lowercase filenames and an XHTML doctype (by changing images to display='block' in the script). Have fun.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
12/27/2007 11:34:29 AM # Ramon Ramon United States | Reply
Hi,

I found your excellent color picker tool. I want to show/hide the tool on a click. To do this I've put the code for the colorpicker in a div which is positioned absolute. But when i load the page the slider and the circle are both in the top-left corner of the page. Im not sure what to do next. Can you help me?

Ramon
12/31/2007 6:28:59 AM # Sean Gallagher Sean Gallagher United States | Reply
@John,
Thanks for updating the download. It now works great!
You did a great job, and I want to thank you for creating such an amazing color picker and giving it the MIT license.

Your friend,
Sean
1/3/2008 10:26:43 AM # jc21 jc21 Australia | Reply
It seems that if the colorpicker is surrounded in a div with a css property of display:none, that when the div is displayed, the color picker doesn't work. However, on the same page, without the css style, it works fine.

Of course an easy workaround would be to hide the div in the onload event after the cp initialisation. However I personally hate the downloading 'mess' that suddenly dissapears when loading a page.

I did manage to work out a much better solution. When displaying the div using the js, after the css change is made I then instantiated the colorpicker. Although, when you hide the div again, two images still remain visible: the mappoint and rangearrows, as these are present in the dom tree just beneath the body. So I've modified your Slider class to add a className to the images, so I can hide them too.

Well worth the effort though, great tool!
jc21's last post: blog.jc21.com/.../" rel="nofollow">Cool Multi Purpose Progress Bars
1/12/2008 1:14:02 AM # Daniel Daniel Switzerland | Reply
Hi John
Thank you very much for your great color picker. I just integrated it into my tool I called "Color Name & Hue". It should help colorblind people to categorize colors into main hues.
http://www.colblindor.com/color-name-hue/
I hope I accomplish your rules of usage. I had to do some adjustments to it. Otherwise, please let me know.
Daniel
Daniel's last post: www.colblindor.com/.../" rel="nofollow">Colour Blindness and Medicine
1/15/2008 7:34:01 PM # Shivanand Sharma Shivanand Sharma United States | Reply
An excellent exaxmple demonstrating the potential of Javascript.
1/19/2008 1:17:19 AM # Edward M. Edward M. United States | Reply
Hello - I saw someone asked above about how to force an update to the display of the colorpicker, if another event updates the hex value textbox. However, I didn't see an answer. Can you give a quick example of what could be called to reset everything based on a new hex value (that isn't typed in by the user)? Thank you - Ed
1/28/2008 11:42:02 PM # Martin Francis Martin Francis Canada | Reply
Hi fellow Godbiter!

Many thanks for producing this superb colour picker - thanks to your very generaous MIT licence I will be integrating it into a Church Website CMS I have developed called Ecclesiact.

Thanks again,
God bless,

Martin Francis
<><
2/3/2008 9:58:41 PM # Moritz Moritz Germany | Reply
Hey John,

great color picker. It was exactly what I searched for! Thank you!

@Ramon, @Arjun and @John:
I have the same problem in IE. In firefox everything is working fine. "Sometimes" the slider and pointer is on the top left and when trying to slide shows NANANA in the input fields. I open the colorpicker in a "prototype window class" window. Opening one or more instances makes no difference.

I couldn't find out a regularity.

Does anyone have a solution?
2/6/2008 6:19:55 PM # Ümit Ümit | Reply
Great work. how can i show / hide color picker?
2/18/2008 5:43:06 PM # Roger Roger United States | Reply
How do you pull out the hex color value? I looked for a get function but there doesn't seem to be one.
2/18/2008 10:27:29 PM # Thi Nguyen Thi Nguyen United States | Reply
For those who want to be able to update the values and graphical displays of the color picker without interacting directly with it, here is the code I have for it:

// this gets the hex value from whatever form field you want.
var inp = document.getElementById( cp_name + '_Hex' );

// the input field is directly tied into the colorpicker app
// so we change the hex value in that field
// and then call the setValuesFromHex() function to change the HSB/RGB values accordingly
// then call the various graphical update functions to update the pointer and such
// see colorpicker.js
// cpObj is the color picker object that is generated

cpObj._cvp.setValuesFromHex();
cpObj.positionMapAndSliderArrows();
cpObj.updateVisuals() ;
2/25/2008 9:28:52 PM # SiNo SiNo Germany | Reply
missing nothing - just a little this.
last line (#132) of function hexToWebSafe() in ColorMethods.js
2/26/2008 3:02:04 AM # SiNo SiNo Germany | Reply
and - sorry - there are still (or again?) mixed case filenames in the zip so that default.html doesn't show much on linux
2/26/2008 7:35:06 PM # Rikkert Koppes Rikkert Koppes Netherlands | Reply
very cool, I had the very same idea the other night (layering images) and started some programming today. I had r,g and b mode working when I started searching for references for the original photoshop palette (don't have photoshop installed). I then stumbled accross your thing, which is exactly what I had in mind.

I might still want to write mine though, I am not too fond of prototype (because of its DOM pollution), furthermore, I don't think one really needs it in this case
2/27/2008 8:21:25 AM # kobe kobe People's Republic of China | Reply
Cool!
It seems like the code at line 135 in file ColorPicker.js is unwanted, isn't it?

[code]
135:    this.color = null;
[/code]
3/1/2008 11:28:32 PM # D D United States | Reply
I tried installing this on my Rails app and couldn't get it to work... ended up installing JSCOLOR - thanks Honza.
3/11/2008 9:06:06 PM # M M Netherlands | Reply
sorry john, tried yours, but jscolor from Honza is indeed much easier to install
3/14/2008 2:52:05 PM # pingback mywebdesigntools.com | Reply
Pingback from mywebdesigntools.com

7 javascript and dhtml color picker solutions for web designer | My web design tools
3/17/2008 1:58:16 PM # Free Collection Free Collection Malaysia | Reply
This is really a cool application. One of the best web design tools ever. Thanks for sharing.
3/17/2008 11:59:37 PM # Dave Dave | Reply
I like this code, thanks a lot
3/31/2008 3:07:07 AM # Wilson Wilson United States | Reply
Hi,

I've tried installing this straight out of the zip file on two different servers and I get a javascript error from the main default.html file at line 200: "Refresh is undefined" when trying to view the page in IE7. It doesn't work for me either in Firefox 2.0.0.13.

The line the browsers choke on is:

Event.observe(window,'load',function() {
  cp1 = new Refresh.Web.ColorPicker('cp1',{startHex: 'ffcc00', startMode:'s'});
  })

Any ideas on what I can do to fix it? The demo at http://johndyer.name/lab/colorpicker/ works just fine.

W
4/9/2008 3:20:57 AM # fei fei People's Republic of China | Reply
very nice!
4/15/2008 2:44:54 AM # randy randy United States | Reply
Great stuff, I have everything working but one thing. I am putting it in a iframe.
When it inits the arrow and slider are up in the top left and will not move. If I put in a hex value then they work. If i access the page directly it works fine. Just the in the Iframe.
Any suggestions?

Thanks again for doing this
4/15/2008 2:58:33 AM # randy randy United States | Reply
just an update to my post. So far i have found that this._barHeight in Slider.jsp is 0 when default.html is inside the iframe and 256 if called directly.

Thanks again
4/20/2008 2:03:16 AM # pingback blog.open-solutions.pl | Reply
Pingback from blog.open-solutions.pl

Open Solutions Blog  » Blog Archive   » The Best of Open Source: Color Picker
4/23/2008 1:45:25 PM # padma padma India | Reply
Hi,

I need multiple color pickers in single page depending on the selection (either 1 or 2 color pickers).
sometimes the slider image and pointer image is on the top left and when trying to select color shows NAN0533 in the input fields.

Can you help me out?
4/30/2008 3:58:17 PM # Andrew haycock Andrew haycock United Kingdom | Reply
great app, have intergrated it into my site but have small issue. the map point image and slider arrows do not want to sit inside my div. they are attached to the colour picker but they sit behind the div and do not appear or disapear along with the div, any ideas would be appriciated
5/5/2008 11:18:29 AM # hooters hooters United States | Reply
this is pretty fucking amazing . kudos to you man!
5/5/2008 4:34:12 PM # Dimitry Dimitry Latvia | Reply
Same problem with the slider positioning here. Didn't figure out how to fix. Love your script, but having it in a popup window is a blasphemy within web 2.0 world. Smile
5/7/2008 11:40:55 AM # pingback blog.libinpan.com | Reply
Pingback from blog.libinpan.com

links for 2008-05-07 | Libin Pan
5/10/2008 5:47:48 AM # pingback jspt.coolwebwindow.com | Reply
Pingback from jspt.coolwebwindow.com

JSPT - Photoshop風カラーピッカー
5/13/2008 7:33:48 AM # 锐风 锐风 People's Republic of China | Reply
There's a bug in IE7.
箭头无法被显示.
5/14/2008 2:07:36 AM # pingback devkick.com | Reply
Pingback from devkick.com

Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog
5/14/2008 9:50:26 PM # pingback af-design.com | Reply
Pingback from af-design.com

AF-Design    » JavaScript Color Pickers
af-design.com's last post: af-design.com/.../" rel="nofollow">Simple File Based Caching in PHP
5/19/2008 6:44:58 PM # pingback pixelco.us | Reply
Pingback from pixelco.us

Javascript Color Picker - Implementa un selector de color como el de Photoshop - Desarrollo | pixelco.us blog
5/23/2008 9:47:49 PM # nick nick | Reply
great work!

just one small remark: the example page (default.html) in your distribution package uses lowercase javascript sources while the file names are capitalized. this caused the colorpicker to malfunction on my server...
5/28/2008 11:01:51 AM # Michael Angelo Tarongoy Michael Angelo Tarongoy Republic of the Philippines | Reply
Thanks bro! I have been looking for this...
5/30/2008 5:09:58 PM # Amiri Amiri United States | Reply
Thanks! This is fantastic! I parametrized the 'cp1' so it could accept arbitrary table ids, so I could put more than one on a page at a time. Works great. It's kinda big, though... I'm working on trying to shrink it a little.

Amiri
6/12/2008 1:05:49 AM # Raphaël Raphaël France | Reply
I found a bug in mode R, G and B. We don't have the correct color in the slider.

The selected color differ from the color showed in the slider.

UPGRADE TO DO ( tested ) in "ColorPicker.js"

Function : Refresh.Web.ColorPicker.prototype.updateSliderVisuals
Line : 571

replace :

var horzPer = (hValue /256)*100;
var vertPer = ( vValue/256)*100;    
var horzPerRev = ( (256-hValue)/256)*100;
var vertPerRev = ( (256-vValue)/256)*100;
this.setAlpha(this._barL4, (vertPer>horzPerRev) ? horzPerRev : vertPer);
this.setAlpha(this._barL3, (vertPer>horzPer) ? horzPer : vertPer);
this.setAlpha(this._barL2, (vertPerRev>horzPer) ? horzPer : vertPerRev);
this.setAlpha(this._barL1, (vertPerRev>horzPerRev) ? horzPerRev : vertPerRev);

by:
x = parseInt ( hValue );
y = parseInt ( vValue );
var n1 , n2 , n3 , n4;
if( x == y ){
  n2 = n3 = 0;
  n1 = x / 255;
  n4 = 1;
} else if( x < y ){
  n3 = 0;
  n1 = x / 255;
  n2 = ( y - x  )/( 255 - x );
  n4 = 1;
} else if( x > y ){
  n2 = 0;
  n1 = y / 255;
  n3 = ( x - y )/( 255 - y );
  n4 = 1;
  }
a = [
  { id:"_barL4" , n: n1 },
  { id:"_barL3" , n: n2 },
  { id:"_barL2" , n: n3 },
  { id:"_barL1" , n: n4 }
  ];
for( var i = 0 , ni = a.length ; i < ni ; i++ )
  this.setAlpha( this [ a[i].id ] , a[i].n * 100 );


Function : Refresh.Web.ColorPicker.prototype.setColorMode
Line : 256

replace:
case 'r': ...
  break:
case 'g': ...
  break:
case 'b': ...
  break:

by :
case 'r':
case 'g':
case 'b':
  var that = this , f = function(s1,s2){that.setImg( that[ s1 ], that.settings.clientFilesPath + s2 )};
  var s = { r:'red',g:'green',b:'blue'}[ colorMode ];
  this[ "_" + s +"Radio" ].checked = true;
  f( '_mapL2' , 'map-' + s + '-max.png' );
  f( '_mapL1' , 'map-' + s + '-min.png' );
  f( '_barL1' , 'bar-' + s + '-bl.png' );
  f( '_barL2' , 'bar-' + s + '-br.png' );
  f( '_barL3' , 'bar-' + s + '-tl.png' );
  f( '_barL4' , 'bar-' + s + '-tr.png' )  ;
  break;


Thank you !
6/13/2008 11:31:51 AM # mostafa mostafa Iran | Reply
thank you.it is very usefull for me.
6/20/2008 2:56:32 PM # techy techy India | Reply
Thanks for such great and nice color picker.
It is wonderful.
I like it very much.
Thanks
6/22/2008 12:27:36 PM # alojaweb alojaweb Spain | Reply
excellent solution, thanks for the contribution.

good very good.
6/24/2008 4:15:28 PM # pingback micksam7.com | Reply
Pingback from micksam7.com

A Dolphin’s Journal of Events  » Blog Archive   » Back to Web Dev
6/26/2008 2:57:36 AM # pingback igeek.com.ar | Reply
Pingback from igeek.com.ar

iGeek  » 32 Codigos Ajax y Javascript bastante interesantes
7/23/2008 3:11:45 AM # trackback John Dyer | Reply
Trackback from John Dyer

Show Commenter's Latest Post: BlogEngine.NET Extension
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
8/8/2008 6:01:49 AM # Mittal Mittal Australia | Reply
Hi John,

This is excellent thing and saved my lot of time/

Is there any way to show and hide the mappoint.gif and rangearrow.gif?

I am trying to put the whole colour picker in a div and with javascript I want to show and hide that div.
Every thing else is working fine but these images are not hiding?

Is there a solution to this?

8/20/2008 9:39:04 AM # Matt Matt United States | Reply
Great work!  
Raphaël's changes fixed the R G and B sliders, but I also noticed that the saturation bar does not show the right color for me.  No matter what the brightness is set to, it is always white at the bottom of the bar and the slider doesn't match the selected color.  
8/20/2008 10:56:45 AM # Matt Matt United States | Reply
I decided to have a stab at fixing my problem.  I don't know javascript, so I just made some little tweaks to colorpicker.js.  Of course, this introduced a panoply of bugs, but it's close.  I can no longer click and drag inside the slider box, and the slider looks ugly when B is set to 100%.  

First, I copied bar-saturation.png to bar-saturationb.png, and changed the copy to black, preserving the transparency.  Then I did the following:

Starting at line 225 I changed

// SLIDER
// bottom: color
this.setBG(this._barL3, this.color.hex);

// top: graduated overlay
this.setImg(this._barL4, this.settings.clientFilesPath + 'bar-saturation.png');

this._map.settings.xMaxValue = 359;
this._map.settings.yMaxValue = 100;

to

// SLIDER
// bottom: color
this.setBG(this._barL1, this.color.hex);

// top: graduated overlay
this.setImg(this._barL2, this.settings.clientFilesPath + 'bar-saturationb.png');
this.setImg(this._barL3, this.settings.clientFilesPath + 'bar-saturation.png');

this._map.settings.xMaxValue = 359;
this._map.settings.yMaxValue = 100;

and added a line (underlined) at about 529

case 's':
  var saturatedColor = new Refresh.Web.Color({h:this.color.h, s:100, v:this.color.v});
  this.setBG(this._barL3, saturatedColor.hex);
  this.setAlpha(this._barL3, this.color.v);
  break;

case 'v':

8/22/2008 7:31:44 AM # Santy Santy | Reply
This is the best colorpicker i found and i would like to use it! But I made my site local and everything worked great and when i uploaded my site it didnt work anymore...All i see are the formfields. I uploaded exactly how it was local (using WAMP). Server issue? Did i look over anything? Any suggestions? THX
8/22/2008 8:03:48 PM # tom armstrong tom armstrong United States | Reply
Dear John,

Thank you for creating this excellent Color Picker. Like many others here, e.g. Mittal on October 7, 2008, I am trying to integrate the color picker into a page so that it opens in a hide/show div, rather than opening another window. I implemented Jon Wallsten's suggestion from October 5, 2007 to set the initial color, which worked perfectly. Jon Wallsten attached to cp1._cvp to initialize the color. I am trying to attach to cp1._map and cp1._slider to do (I think):

cp1._map.Arrow.style.display = '';
cp1._slider.Arrow.style.display = '';

and

cp1._map.Arrow.style.display = 'none';
cp1._slider.Arrow.style.display = 'none';

My attempts to attach have not worked, so I don't know if this is the right approach.

Any suggestions?

Thanks,
Tom Armstrong
8/23/2008 4:39:54 AM # Santy Santy Belgium | Reply
just figured out what the error is

Error: Refresh is not defined
Line: 201

IE explains the function refresh is not defined... but it is!!
the default.html from the zip package doesn't work either.
Anybody?
8/24/2008 5:23:48 PM # Georg Tavonius Georg Tavonius Germany | Reply
Genious! Really good thing. Except of using of prototype. Wink
I would like to use it, but I already use jQuery in my projects, and another big library would be to much. Can you really easily strip prototype out of it? Would be great for more people, I think.

Cheers, and great work,
Georg
8/24/2008 11:25:19 PM # Ciko Ciko Indonesia | Reply
i have some problem like Wilson,
get a javascript error from the main default.html file at line 200: "Refresh is undefined"..
8/25/2008 12:33:09 AM # John Dyer John Dyer United States | Reply
For those on L/UNIX systems/hosting, please make sure to rename all the files as lowercase (i.e. rename ColorPicker.js to colorpicker.js)
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
8/25/2008 9:00:09 AM # Santy Santy Belgium | Reply
Hi John,
This is indeed the solution to the "Refresh not defined" problem.
Thanks!!!
8/25/2008 2:25:46 PM # Shota Watanabe Shota Watanabe Japan | Reply
Hello, John.
Great Tool! Thanks.

I found kind of a bug in this tool, so report that.
When we checked RGB mode and slide, we can find FF100FF like color code.
This is related mapValueChanged function line 330 - 381
We needed to change '256' to '255' (because value is 0 ~ 255)

regex: s330,381/256/255/g

Thank you for all,
Shota Watanabe
8/26/2008 3:46:15 PM # ptdorf ptdorf Ireland | Reply
Its great! Thanks a lot for sharing!
8/30/2008 6:53:15 PM # pingback xtreme-design.ro | Reply
Pingback from xtreme-design.ro

Photoshop-Like JavaScript Color Picker
9/7/2008 2:44:16 PM # Steve Steve South Africa | Reply
This is the work of genius, thank you for sharing it!
9/12/2008 11:37:49 AM # deamerica deamerica United States | Reply
  
I congratulate you good job, just implement this solution one that section of my website.

Thank you
9/14/2008 8:22:55 PM # Hendrik M.J. Arnoldus Hendrik M.J. Arnoldus Italy | Reply
I ordered a copy of this colorpicker and payed the required amount  for it (PayPal) to Applied Search Ltd. No software was delivered however.
9/14/2008 10:48:10 PM # John Dyer John Dyer United States | Reply
@Hendrick,
As noted in this post, the colorpicker is free (MIT). You might want to contact Applied Search and ask them to take up your request.
John Dyer's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
9/15/2008 2:34:50 AM # Pete Pete United States | Reply
Having problems with the files. I download and unzip and it works right on my desktop. However I upload the files to my client's webserver and only thing I changed was default.html -> picker.html and I receive a JS error "Refresh is not defined". All the files are there, it works locally, and the structure / directories remain the same. Ideas?
9/15/2008 3:47:10 PM # Hendrik M.J. Arnoldus Hendrik M.J. Arnoldus Italy | Reply
I am terribly sorry, my earlier message was a horrible mistake (posted to the wrong blog because of a bookmark mistake). I confirm that I have no problem with your software (which is free and can be downloaded directly). My apologies again.

Hendrik M.J. Arnoldus
9/24/2008 1:46:21 PM # Sal Gambino Sal Gambino United States | Reply
Hi John,
The color picker is a great tool. I was looking for something like this to enhance/modify for a school project regarding color vision deficient learners and the difficulty they have seeing poorly chosen color palettes during presentations. With a lot of hard work, I'm very happy with the final product (since I'm relatively new to JavaScript).

Here's a link to the end result: two color pickers modifying the background and foreground color properties of a single new text area.

http://www.salgambino.com/cp_page.shtm
10/12/2008 11:42:30 AM # Scotty Waggoner Scotty Waggoner United States | Reply
Has anyone found a solution to make the Arrows appear and disappear when the color picker is in a div that can be shown and hidden?  Also this div that I am trying to put the color picker in has a z-order value and the arrows end up being hidden behind the div.

Another problem I am having is when the picker is first loaded, and I try to drag the arrows around the selected color turns black and stays black until I manually change the hex code.  Then it works fine.
10/17/2008 7:56:07 AM # MMF MMF Egypt | Reply
Good

thanks a lot Smile
10/21/2008 7:46:06 AM # neoweb neoweb Peru | Reply
  
I was able to configure although with difficulty, but this excellent tool, thanks for the contribution.
10/21/2008 3:47:49 PM # Pete Jordan Pete Jordan United Kingdom | Reply
Hi,

Thanks for this: it's nicely coded, and is saving me huge amounts of wheel reinvention. Coupla patches:

1. there's a bug in the Refresh.Web.Color constructor that stops base images being updated if the component being tested for in the constructor is zero:

diff -c -r1.1 ColorMethods.js
*** ColorMethods.js     21 Oct 2008 10:31:26 -0000      1.1
--- ColorMethods.js     21 Oct 2008 10:32:39 -0000
***************
*** 60,70 ****
        };
  
        if (init) {
!               if (init.hex)
                        color.setHex(init.hex);
!               else if (init.r)
                        color.setRgb(init.r, init.g, init.b);
!               else if (init.h)
                        color.setHsv(init.h, init.s, init.v);
        }
  
--- 60,70 ----
        };
  
        if (init) {
!               if (init.hex!=null)
                        color.setHex(init.hex);
!               else if (init.r!=null)
                        color.setRgb(init.r, init.g, init.b);
!               else if (init.h!=null)
                        color.setHsv(init.h, init.s, init.v);
        }

2. I've anonymised the help function in the Refresh.Web.ColorPicker setColorMode method to avoid any namespace conflicts:

*** ColorPicker.js      21 Oct 2008 10:31:27 -0000      1.1
--- ColorPicker.js      21 Oct 2008 10:40:58 -0000
***************
*** 161,167 ****
                this.color = this._cvp.color;
  
                // reset all images
!               function resetImage(cp, img) {
                        cp.setAlpha(img, 100);
                        img.style.backgroundColor = '';
                        img.src = cp.settings.clientFilesPath + 'blank.gif';
--- 161,167 ----
                this.color = this._cvp.color;
  
                // reset all images
!               var resetImage = function (cp, img) {
                        cp.setAlpha(img, 100);
                        img.style.backgroundColor = '';
                        img.src = cp.settings.clientFilesPath + 'blank.gif';

Oh, and one minor quibble: your default.html demo page loads its javascript files with lower case names; the physical filenames are in camel case. Not everybody operates on non-case-significant file systems Smile
10/23/2008 10:09:36 PM # mina mina Spain | Reply
Hi, please how can I get the code to add in my blog?

hola, quisiera colocar en mi blog el colorpicker, y necesito un código para publicarlo en mis entradas, como lo puedo hacer, Gracias.
10/27/2008 4:07:15 AM # pingback ceslava.com | Reply
Pingback from ceslava.com

Generador online de gráficas | ..: Cristian Eslava |  Diseño Gráfico / Web | Maquetación | Formación :..
ceslava.com's last post: feedproxy.google.com/~r/ceslava/~3/Fd5o9iR9fYE/" rel="nofollow">Edición de sitios WordPress con Dreamweaver CS5
10/27/2008 12:55:18 PM # pingback speckyboy.com | Reply
Pingback from speckyboy.com

20 Amazing Javascript Prototype Scripts, Elements, Widgets, Classes.. : Speckyboy - Web Design, Web Development and Graphic Design Resources
10/28/2008 9:28:50 PM # Chris Wolf Chris Wolf South Africa | Reply
Hey, just a quick bug I found (hope it's a bug! =D), but whenever I'm in the hue view of the color picker, and I enter a value of "CC0000", the main color window doesn't update =(

Otherwise, thanks for a fantastic color picker! I'm using it everywhere! Awesome!
11/15/2008 10:24:23 AM # Ehsun Ehsun Iran | Reply
Hi,
Thanks for you nice component. Can you help me to sort out this problem:
The colorPicker is working fine in my local server, but when I upload it, it nags the Refresh is undefined. Can you check it here:
www.myofflines.com/colorpicker/colorpicker.php
11/15/2008 1:21:42 PM # Ehsun Ehsun Iran | Reply
I found the problem!!!
You named the files in CamelCase style but refer to them in the page in all small letters which does not make any problem in windows servers (which you use ;) ) but in the linux servers is totally different! Laughing
11/16/2008 7:34:01 AM # Dilip Dilip United States | Reply
Thanks bro! genius work. I started using it in my website. Really works cool. Is there any copyright restictions for this? Please let me know before I put in the production server. Thanks once again...
11/27/2008 11:02:38 AM # Harley Harley United States | Reply
Has anyone else had a problem where when the color picker is inside DIVs with border > 0 the selector icons become offset from the main color window?

The problem resolves when I set the border to 0px in my CSS but that is not an option for the final page...

Thanks!
11/30/2008 4:41:26 AM # pingback roshisoft.info | Reply
Pingback from roshisoft.info

Chinese Chop API Code Generator Using John Dyer’s JavaScript Color Picker
roshisoft.info's last post: msblogs.com/.../#comment-1323" rel="nofollow">Comment on Microsoft Surface Computing by Callaz3
1/14/2009 3:35:32 AM # jade jade United States | Reply
any body know how to implement color picker in vb, i am working on a simple fashion software for my cheap fashion website http://www.fashonplc.com
1/15/2009 8:09:45 AM # Chris Corbyn Chris Corbyn Australia | Reply
Awesome, thanks so much for this!  I'll post what I've used it for soon (another cool JS project that will appeal to programmers).
1/15/2009 12:40:06 PM # Chris Corbyn Chris Corbyn Australia | Reply
I've got a quick question (hopefully).  The way I'm using the color picker is in a new window (via window.open).

In the parent window I have an input element that needs to the hex value in it.  What I'd like to achieve is to have the hex value in the parent window's input element update on-the-fly with the inputs in the color picker window.

Effectively I'd like something like:

colorPicker.onUpdate = function() {
  //do whatever while the user is sliding the slider around
};

Is this easy to add, or does it already exist?
2/6/2009 1:24:13 PM # Marcel Lainez Marcel Lainez Republic of the Philippines | Reply
Wow!!! You are a genius!!! That is an awesome script!!!
2/17/2009 1:45:30 PM # S.Ajanthan S.Ajanthan | Reply
SUPERB SCRIPT!. Awesome.. thanks for sharing with us.
2/23/2009 3:07:38 AM # Adam Adam Canada | Reply
I'm having a problem using this script in Firefox 3.0.4 in regards to quirks mode. Firefox is only displaying the picker correctly when the rendering mode is quirksmode. If rendered in standards mode, is given (as it should be) the slider bar and the colourmap images are pushed down.
Here are a few screenshots rendered with Firefox 3.0.6:
http://www.meetcweb.com/files/colourpickss/

I have tried making a fix for this, but its still not perfectly aligned. I created 2 classes in CSS and applied these classes to certain elements in the script.

slider.js line 44, after add:
this._arrow.className = 'colorpicker margin';

colorpicker.js line 68, inline add:
, className: 'colorpicker'
after
'blank.gif', width:256, height:256

add the same on lines 72, 87, 91, 95, 100

For the CSS classes,
.colorpicker {
display: block;
}
.margin{
margin-top: 1px;
margin-left: 3px;
}
3/10/2009 4:52:56 AM # Slopjong Slopjong Germany | Reply
Really great work John. As you already saw on twitter I'm using it in my wordpress plugin Collroll (http://wordpress.org/extend/plugins/collroll/).

It would be nice to have a function like cp<index_or_what_ever>.hide() and cp<index_or_what_ever>.show() to control the visibility of the sliders.

Please notify me if you've updated your cool color picker Smile
Slopjong's last post: slopjong.de/.../#comment-7577" rel="nofollow">Comment on ‘staticMetaObject’ is not a member by Delly
3/19/2009 2:03:48 AM # Jon Jon United States | Reply
This is a great script.  Exactly what I was looking for.  Thanks for sharing this!
6/9/2009 5:07:06 PM # pingback ephrontech.wordpress.com | Reply
Pingback from ephrontech.wordpress.com

Prototype.js Javascript Framework « Ephrontech's Blog
4/28/2010 12:37:43 PM # pingback php.compxler.com | Reply
Pingback from php.compxler.com

Web设计与开发终极资源大全(上) | PHP知识库 - php.compxler.com
5/1/2010 5:42:29 PM # pingback afiffattouh.com | Reply
Pingback from afiffattouh.com

100 Essential Web Development Tools | Afif Fattouh - Web Specialist
5/5/2010 12:54:53 AM # pingback johndyer.name | Reply
Pingback from johndyer.name

John Dyer | Refactoring the JavaScript Color Picker - Step 1: Clean up the HTML and CSS
johndyer.name's last post: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
5/10/2010 7:43:01 AM # pingback yyq129.com | Reply
Pingback from yyq129.com

Web设计与开发终极资源大全(上) - 壁虎漫步网络
5/21/2010 6:44:03 AM # pingback 238.cmanager.org | Reply
Pingback from 238.cmanager.org

Aspen Aftermarket Pt Cruiser Sebring 2008 Chrysler Crossfire, Resort Sebring Florida
5/29/2010 8:56:18 PM # Peter Dematté Peter Dematté Austria | Reply
Hi John,

I wrote you once before (can't remember exactly what though... I think I wanted to give you some hints,...) but never got an answer (...I know, you can't answer anyone ;o)

I kind of finished my colorPicker now (http://colorpicker.dematte.at) and wanted to ask you if it's ok if I mention your nice project on my web-page.

I would be pleased to get some response if you can spend some seconds.
Thanks and good luck for the future.
I like your work a lot,

Cheers
Peter
5/30/2010 7:10:01 AM # bookmark bookmark United States | Reply
The problem resolves when I set the border to 0px in my CSS but that is not an option for the final page...

Thanks!
6/4/2010 9:42:57 AM # pingback coolseo.org | Reply
Pingback from coolseo.org

Web 设计与开发终极资源大全 | Cool SEO
6/8/2010 12:14:49 AM # tibia gold tibia gold United States | Reply
Thanks for the share, I have been readin online all day and this was actully worth reading. Thanks
6/13/2010 5:08:41 AM # seo seo United States | Reply
Thanks and cheers I set the border to 0px in my CSS but that is not an option for the final page...

seo's last post: http://www.ndesigns.info/%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%97%e0%b8%b3-seo/" rel="nofollow">รับทำ SEO
6/21/2010 10:44:03 AM # rs gold rs gold United States | Reply
Now and then I'll stumble across a post like this and I'll recall that there really are still interesting pages on the web. ^_^. Thanks.
6/21/2010 10:44:32 AM # eve isk eve isk United States | Reply
Excellent read, I just passed this onto a colleague who was doing a little homework on that. And he in fact bought me lunch because I found it for him
6/21/2010 10:44:52 AM # eve isk eve isk United States | Reply
Thanks for the share, I have been readin online all day and this was actully worth reading. Thanks
6/21/2010 12:17:47 PM # Tyler Perryinton Tyler Perryinton United States | Reply
I have read a lot of the comments and I just wonder why people say the things they do, I mean they can find the bad in anything.  I guess that is where we are in this world. Just hurt hurt hurt, no matter what the subject is. Lawrence Williams  www.trybw.com  Fort Myers, Naples, Bonita,Cape Coral  Computer Repair Service
6/30/2010 1:49:15 PM # pingback lbritney.cn | Reply
Pingback from lbritney.cn

Web 设计与开发终极资源大全 - 向后看
lbritney.cn's last post: http://www.lbritney.cn/?p=132" rel="nofollow">可以飞行的汽车 1
7/2/2010 9:55:36 AM # Bingo Deposit Bonus Bingo Deposit Bonus United States | Reply
The strict doctype issue is actually just the image display type. All you need to add to your css is "img { display: block; }", and this picker will also work in strict doctypes.

This picker really is great. Even if the insides are a little scary (any javascript that greps the useragent string is frightening). Thanks John, especially for the MIT license!
7/5/2010 9:31:10 AM # Manish Manish India | Reply
hi..all
i added this color picker in my site ,... this is awesome color picker...
but i hv query on it tat i want to set color picker as auto position.. when click on icon, color picker always open on top side. but i want it in center...

Pls any one know this solution then pls jelp me Smile

Thanks,
Manish R J.
7/7/2010 9:12:41 AM # designer sunglasses designer sunglasses United States | Reply
Hi,

I've many instances of color picker in a page. When there is a single picker it works fine. However in case of multiple instances in a same page, the picker is behaving abnormal. It does not show up the slider image for some picker and the color values in H S B text boxes shows NAN.

Any help on this?
7/10/2010 4:14:54 PM # pingback fedev.net | Reply
Pingback from fedev.net

Web 设计与开发终极资源大全(上) at FEDEV
7/14/2010 6:41:39 PM # pingback yanxinxue.com | Reply
Pingback from yanxinxue.com

Web 设计与开发终极资源大全 :  : Full House
yanxinxue.com's last post: http://www.yanxinxue.com/?p=10064" rel="nofollow">21个演示展示强大的jQuery特效
7/16/2010 2:26:37 PM # resume resume United States | Reply
Hi John,
The color picker is a great tool. I was looking for something like this to enhance/modify for a school project regarding color vision deficient learners and the difficulty they have seeing poorly chosen color palettes during presentations. With a lot of hard work, I'm very happy with the final product (since I'm relatively new to JavaScript).

Here's a link to the end result: two color pickers modifying the background and foreground color properties of a single new text area.
resume's last post: http://www.resumedictionary.com/resume-order-2/" rel="nofollow">Resume Order
7/16/2010 2:31:08 PM # Tenerife Property Tenerife Property United States | Reply
I have read a lot of the comments and I just wonder why people say the things they do, I mean they can find the bad in anything.  I guess that is where we are in this world. Just hurt hurt hurt, no matter what the subject is. Lawrence Williams  www.trybw.com  Fort Myers, Naples, Bonita,Cape Coral  Computer Repair Service
Tenerife Property's last post: tenerifeestateagents.net/.../#comment-724" rel="nofollow">Comment on 105% mortgages on Mirador del Atlantico apartments, Chayofa by Festina Men’s F16275/1 Retro Grade Stainless Steel Leather Strap 24-Hour Dual Time Watch |
7/22/2010 6:52:57 AM # pingback boke.lozsky.com | Reply
Pingback from boke.lozsky.com

Web设计与开发终极资源大全 | My Sky
7/24/2010 10:01:32 AM # useful articles useful articles United States | Reply
Really, it's a great article!
I’m looking forward to your next postings.
7/24/2010 10:10:16 AM # mesothelioma mesothelioma United States | Reply
I am very pleased to find this site.I want to thank you for this great read! Definitely enjoying every bit of her and my favorite new things to check you write.
mesothelioma's last post: mesothelioma.dflix.net/.../" rel="nofollow">Rosetta Genomics Names Genekor S.A Exclusive Distributor for Three microRNA-based Assays in Greece

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading



Web Statistics