@madpilot makes

Javascript colour picker based on Prototype

I have written a small colour picker using the Prototype javascript library, which I thought I would share with the world.

It is very simple, but does the job suprisingly well. I may very well add extra features to it later on, so watch this space.

You can download the source file here.

Instructions for use

1. Include prototype.js and colourPicker.js in you html

2. Create a “target” element and a “trigger” element. The target element is the input tag that will store the colour hex code, so a text box or hidden input will work nicely. The trigger element is the element the user will click to popup the colour picker

  1. < input type=“text” name=“colour” id=“picker” value=“” />
  2. < a id=“trigger” >Pick a colour< /a>

3. Create an instance of the colour picker using the following javascript:

  1. var picker = new ColourPicker(‘picker’, ‘trigger’);

And that is it! Clicking the link will popup the colour picker and after a colour is selected, the text box will then have the hex value in it.

Future plans include better positioning of the popup, and callback functions to you can intecept the colour.

Update: you can see a demo here.

10 comments

  1. Could you please provide an example on your site? It's much easier to see if it's something someone might need by testing it.
  2. No worries Mladen, see the edit to the article above.
  3. Hi,



    I'd like to inform you that we are currently building a javascript framework for unobtrusive usage.



    You can find informations here : https://www.tennaxia.net/tos_trac



    The frameworks is built around components :

    - common : basic fucntionnalities

    - datagrid : enhance a HTML table that displays data

    - forms : various enhancements to HTML form elements

    - layout : various enhancements to HTML presentation



    The framework is mainly based on Prototype, Scriptaculous and event:Selector, but also on some scripts coming from the internet.



    As you may own copyright on some of these scripts, we'd like to invite you to verify that we did not break any IP rights.

    If we did so (I hope we did not but ...), please provide us with directions to correct our mistake.



    Also, we'd like to invite you to participate in the project.

    The advantages to participate in the project are numerous :

    1/ we provide the Trac system so you have tickets, wiki, forums, SVN, ... for free

    2/ you can benefit from tested scripts with a consistent organization

    3/ the component architecture allows you to use only what you want to use : all the components of the framework work without the others BUT they can work together.



    If you want to participate, simply drop a mail to cblin at tennaxia.com : I'll do the necessary to provide you more informations to create an account on the Trac system and on the SVN.



    I hope you will visit the UJF site and talk about it on your blog, so the project can gain popularity quickly.



    Best regards,



    Christophe Blin

    Tennaxia
  4. Awesome! That is really cool! Go for it, as long as there is a mention on this article in a source comment I'm happy.



    Good luck with it!



    -Myles
  5. Pingback: Bloggy Hell » Blog Archive » New JavaScript framework - Tennaxia
  6. Pretty sweet! What is the license? Can commercial companies use it? (want to use it for my start-up company I'm working at). Thanks for sharing
  7. Nikk: Go for it :)
  8. Hello,

    This is one of the most clean codes for color picker I saw.

    About the license: Can it be used in a distributed commercial web application? If you're ok with using it, what copyright notice should I put in? :)



    Thank you,

    L
  9. Pingback: Practical Metaprogramming with Ruby: Storing Preferences: MicroISV on a Shoestring
  10. Hi, thanks for your colorpicker.



    I've slightly adapted your version. The separate trigger is not needed if you provide a label around your input element... less obtrusive and easier to handle





    trigger me!







    code here:

    http://code.google.com/p/mvh-source/source/browse/trunk/pico/www/js/colourPicker.js

Leave a comment