Thursday, March 4th, 2010
Color Picker: Works even in IE6
Category: Component
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:
-
-
var icon = Raphael("picker", 23, 23).colorPickerIcon(11, 11, 10);
-
-
icon.attr({cursor: "pointer"}).node.onclick = function () {
-
document.getElementById("benefits").style.visibility = "visible";
-
var out = document.getElementById("output");
-
out.style.visibility = "visible";
-
-
// this is where colorpicker created
-
var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, "#eee", document.getElementById("picker2"));
-
-
out.onkeyup = function () {
-
cp.color(this.value);
-
};
-
// assigning onchange event handler
-
cp.onchange = function (clr) {
-
out.value = clr;
-
document.body.style.background = clr;
-
document.body.style.color = Raphael.rgb2hsb(clr).b <.5 ? "#fff" : "#666";
-
};
-
// that’s it. Too easy
-
-
icon.node.onclick = null;
-
};
-
Related Content:
- COLORPICKER
Color Picker... - Use transparent pixels in pictures
Use transparent pixels in... - Create a non-specified date picker with LotusScript code
Have you been searching for a way in your Domino environment to use an embedded datepicker in a dialog box that isn't associated with a specific... - Entering a blank date in the DateTimePicker control
3.4 rating from 37 votes
Raphael never stops to amaze me :)
There is a 200px (or somewhat) right shift between the cursor and the real click on IE6+. Beside that it works.
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.
No libraries, but is powered by Raphaël… WTF? We’re developers, no need for marketing s**t.
It doesn’t seem to work on IE8…
It’s very nice and all. But why say “No libraries” when you clearly need to include a 56K library to make it work?
I’d love to see this a jQuer plugin
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
:’(
@deanedwards, obviously Raphael became a standard API extension in most major browsers. (except IE8 ofcourse).
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.
@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?
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.
@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…
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?
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.
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.
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.
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.
To be fair, it does say:
“No libraries*
*Powered by Raphael”
And it’s good. Shame about the horizontal offset in IE6 though.
@deanedwards, obviously Raphael became a standard API extension in most major browsers. (except IE7 ofcourse).