HN Explorer

29 comments

[ 4.1 ms ] story [ 45.9 ms ] thread
randomdrake
Very nicely done. I attempted something like this a while ago but it didn't come out quite as nice.

I like that you decided to use some base64-packed images instead of using anything external; good idea.

You may want to include something about what browsers are supported. As it is, the page is completely broken and not usable with IE9 (1).

Nice work, though!

[1] - http://i.imgur.com/d7JFq.png

bebraw
I'll look into IE9. It would be nice to have that working.
bebraw
IE9 should work now. There are some other goodies as well. Just a FYI. :)
crazygringo
Wow, very clever usage of overlapping semi-transparent gradients to get the square of saturation and brightness variations. Good job!

Too bad it isn't possible to draw color wheels in pure CSS, AFAIK...

quarterto
Surely something similar can be done with radial gradients?
crazygringo
Radial gradients in CSS have color vary with radius.

A color wheel needs the color to vary with the angle, not with the radius.

From what I know, CSS3 doesn't do that.

quarterto
Very clever. Unfortunately, the rounded corners aren't being drawn right here (Firefox 15a2 on Linux), there's blobs of colour being drawn.
pbreit
How did color pickers like this become so popular in non-pro situations? They are completely impossible to use for mere mortals (for example, try and pick the same color twice).
mparlane
Copy the hex value! XD

Seriously though, how would you go about picking the same colour twice without just giving a finite list of colours and unique names for each ?

pbreit
"giving a finite list of colours and unique names"

Exactly! I don't know why this isn't provided more often, at least as an option.

nextstep
Wow, this works very well on Mobile Safari.
sakai
Nice, was just looking for something like this. Thanks!
rizumu
It would be great if github used a color picker, instead of requiring manual hex input, for the issues label color picker.
Smudge
Ah, I see, by "scaleable" you mean that it can literally be scaled to different sizes on the page. (For HN, an uncommon use of that word.)
bebraw
Yeah, exactly. That's the main benefit of a CSS based approach.
mparlane
It doesn't scale automatically though :( I shrunk the page and it did not like that :P I assume "scaleable" is by a size value defined on creation?
tinyjoe
in jquery: $(window).bind('resize', renderfunc);
kangax
Looks nice. Are you planning to support IE<9?
bebraw
The gradients are defined using CSS. I think it might work if someone threw suitable declarations there. I recall IE<9 implement some custom syntax that might work.
kangax
I glanced at the code quickly and noticed `addEventListener` without `attachEvent` fallback. So that will fail in at least IE8 and below. Not sure about other things, but I'm guessing you never tried it in IE8?
bebraw
Nope. Definitely need to add that fallback there. Good point!
makepanic
using opera 12 on win7 the cursor position isn't matching the color picker circle :(
BillSaysThis
Would be nice if there was an affordance for transparent, this is a common problem for JS color pickers I've seen recently.
bebraw
How would deal with this ui-wise? Just another vertical slider for alpha? The underlying color lib definitely supports this.
BillSaysThis
A checkbox on the bottom right (under the text fields, that is).
dpham
i'm sure other people have mentioned but it doesn't work in IE9 or below. You should at the very lease support IE9. If you wanna throw away IE8 or below, it would make sense to just use canvas rather than a base64-encoded image.