Tuesday, August 14, 2007

Javascript Color Picker boxes in a wiki

Javascript color pickers seem to be rampant around the web, some free with restrictive licenses. Some for purchase, dot dot dot I found this one based on a tutorial teaching one how to build a javascript color picker. It has both a streamline and advanced view. http://www.webreference.com/programming/javascript/mk/column3/index.html.

There is an available contrib in TWiki for color picking but it seems a bit outdate for a look and feel. More importantly not setup in a way so I can associate it to changing colors of something on the screen.

I created this contrib by

You know have a Color picker. The color picker works by using includes in your page.

Includes this ONCE on your page %INCLUDE{"TWiki.ColorPicker" section="javascript" }%

Include this after each component you would like to change color for. %INCLUDE{"TWiki.ColorPicker" section="colorpicker" CLICKER="" CHANGER="" }%

Where

  • section=colorpicker is the part that generates the goodness.
  • clicker is the object used to bring up the selection box
  • change is the object background you are trying to change
If the object is an input type with value attribute, its value will be set to hex color value.
Examples below or see the examples in a TWiki

Examples


Text Box :



Click on Fuzzy.

Hi! Fuzzy



Change Color


Some text that

needs a new color

don't you think