views:

326

answers:

3

Has anyone coded up a jQuery query color picker that lets you pick colors from a predetermined list of colors? Something like a product color picker on an Ecommerce site.

Most of the searching I've done reveals a lot of general purpose, pick-any-color-in-the-rgb-spectrum, but few options for picking specific colors.

+1  A: 

Hmm, I assume you don't want a drop down with named values.

What about picking your colours, and then doing a loop

$.each(['red', 'blue', 'green'], function(i, colour) {

    $('ul#my-colours').append('<li style="background-color: ' + colour + ';">Choose</li>');

});

$('ul#my-colours li').click(function() {
    setColour($(this).css('background-color'));
});

And then make them say 20 x 20 px and float them?

alex
+1 for useful Useful code for sure, but I'm more interested in finding something that's polished with some nice effects and the inevitable style problems already fixed.
Alan Storm
@Alan Storm Definitely, I understand. I wonder if you could hack an existing solution, i.e. limit the amount of colours it generates from, and obviously make the clickable targets bigger (because you are limiting the colours available).
alex
+3  A: 

There's Really Simple Color Picker which allows you to set predefined colours (I'm British :-P). It does allow you to change the colour with an input box, but a quick jQuery command would allow you to disable it if you wanted predefined colours only.

Andy E
+1 for plugin and *colour* :P
alex
Does this still work for the current version of jquery? I'm not getting any click events on the colour block.
Byron Cobb
@Byron Cobb: works fine for me in 1.4.2 in IE, Chrome and Firefox. I wrote a quick demo for you, http://jsfiddle.net/GA67R/1/. You need to capture the *change* event rather than click events.
Andy E
Thanks for taking the time to help Andy - My problem is that i can't even get the colour options to apear when i click on the initial box.Using your code I have something Like this in the html:<input id="DashboardMenuFontColour" value="#333399" style="border:1px solid black;"/>and this on my $(document).ready:$("#DashboardMenuFontColour").colorPicker().change(function () { alert("new colour is " + this.value); });It renders the small box instead of an input, but clicking on it does nothing.I should probably start a new thread :P
Byron Cobb
@Byron: yeah good idea, I'll keep my eye out for it.
Andy E
A: 

Hell yea they have! I found this gem the other day. http://acko.net/dev/farbtastic

Ballsacian1
Thanks for the enthusiasm, but did you read the question? That's exactly what I don't want.
Alan Storm
Sorry apparently I didn't.
Ballsacian1