Thursday, March 4th, 2010

Color Picker: Works even in IE6

Category: Component

<>blockquote>

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

javascript
< view plain text >
  1. var icon = Raphael("picker", 23, 23).colorPickerIcon(11, 11, 10);
  2.  
  3. icon.attr({cursor: "pointer"}).node.onclick = function () {
  4.     document.getElementById("benefits").style.visibility = "visible";
  5.     var out = document.getElementById("output");
  6.     out.style.visibility = "visible";
  7.                
  8.     // this is where colorpicker created
  9.     var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, "#eee", document.getElementById("picker2"));
  10.                
  11.     out.onkeyup = function () {
  12.         cp.color(this.value);
  13.     };
  14.     // assigning onchange event handler
  15.     cp.onchange = function (clr) {
  16.         out.value = clr;
  17.         document.body.style.background = clr;
  18.         document.body.style.color = Raphael.rgb2hsb(clr).b < .5 ? "#fff" : "#666";
  19.      };
  20.      // that’s it. Too easy
  21.                
  22.      icon.node.onclick = null;
  23. };

colorpicker

Related Content:

Posted by Dion Almaer at 6:02 am
20 Comments

+++--
3.4 rating from 39 votes

20 Comments »

Comments feed TrackBack URI

Raphael never stops to amaze me :)

Comment by V1 — March 4, 2010

There is a 200px (or somewhat) right shift between the cursor and the real click on IE6+. Beside that it works.

Comment by ywg — March 4, 2010

That it works in IE 6 too should not be a selling point. The web is trying to get away from this ancient browser. Developing for it costs us all extra money and we should just let it die peacefully.

Comment by Jeria — March 4, 2010

No libraries, but is powered by Raphaël… WTF? We’re developers, no need for marketing s**t.

Comment by igstan — March 4, 2010

It doesn’t seem to work on IE8…

Comment by badosa — March 4, 2010

It’s very nice and all. But why say “No libraries” when you clearly need to include a 56K library to make it work?

Comment by deanedwards — March 4, 2010

I’d love to see this a jQuer plugin

Comment by DamirSecki — March 4, 2010

btw, for me not workking on opera 10.5, can’t click on the icon
IE8 hides the icon , so I can’t even click on it

:’(

Comment by DamirSecki — March 4, 2010

@deanedwards, obviously Raphael became a standard API extension in most major browsers. (except IE8 ofcourse).

Comment by BenGerrissen — March 4, 2010

Works even on IE6, but shamefully not on Opera 10.5.

Oh, it seems like someone was too worried with a browser released on 2001 and forgot to test it on a browser released weeks ago.

Aside this shame, it looks / runs nice.

Comment by HudsonTavares — March 4, 2010

@HudsonTavares, considering IE6 still has close to 20% of the market share and Opera about 2.4% I think supporting that near decade-old browser is still an important step for most developers. Unless you think ignoring one in five visitors to your site is a good idea?

Comment by smfoushee — March 4, 2010

First of all ofcourse IE6 should die, anyonde developing for it is targeting the wrong markets.

Second, i don’t think it’s a really handy picker. It locked my FF 3.6 for about 6 seconds when i first hit the page, first tried to drag the bottom black/gray slider, which only responded after 1.5 seconds, and then when i tried to drag the picker inside the circle it only wanted to work onclick instead (sticky to my cursor) instead of onmousedown

It’s buggy, and should have been implemented with canvas imo.

Comment by SchizoDuckie — March 4, 2010

@SchizoDuckie – I disagree – SVG is a much better options considering the fact that you can bind events to individual elements in an SVG fragment. I do think the event handling in this could use work though – I can fully understand how FF would lock up. Looking at doing a MooTools port…

Comment by sixtyseconds — March 4, 2010

Why do the colors in the outer regions of the wheel change when I move around the picker? They also change when I move the brightness slider, but they don’t reflect the brightness. Or is this just my monitor adapting to the changing background color?

Comment by bugme — March 4, 2010

Good work, but a bit slow on my computer with firefox 3.6

Think it would be much faster using an image to display the rainbow colours instead of all those PATH objects.

Comment by Terje — March 4, 2010

Am I the only one who hates this OS X-style color wheel? It’s hard to adjust saturation, and it’s hard to change hue while maintaining saturation/brightness. The Photoshop-style color picker is perfect, IMO. Hue slider, brightness/saturation on two axes.

I guess though, if given a choice between OS X “crayon” color picker or this, I’d take this. Barely though.

Comment by jpsimons — March 4, 2010

The Adobe color picker is not perfect either.

In this color picker, there is support for the color wheel, triangle, Adobe style picker, and MS color square.
Works in IE6. And Opera. And its tiny.

It does use images (but there are plans to drop them).
In the style of Rafael’s claim, it doesn’t use require any library. Powered by Mootools. ;)

Its in an early Alpha, but seems pretty stable and is under active development.

Comment by SamGoody — March 5, 2010

It looks very nice! Although I already use this one:
http://www.switchonthecode.com/tutorials/javascript-interactive-color-picker
which is also short, simple and works in IE6.
For my own use I changed some stuff (f.e. to create it’s own DOM), so it can easily be used as component in webapplications.

Comment by Spellcoder — March 5, 2010

To be fair, it does say:

“No libraries*

*Powered by Raphael”

And it’s good. Shame about the horizontal offset in IE6 though.

Comment by Skilldrick — March 5, 2010

@deanedwards, obviously Raphael became a standard API extension in most major browsers. (except IE7 ofcourse).

Comment by alpeem — December 14, 2010

Leave a comment

You must be logged in to post a comment.