0
I Use This!
Activity Not Available

Project Summary

This script provides an easy to use and integrate HSV color picker.

see the DEMO

or just download (VERSION 1.0)

The 1.0 release works with prototype 1.6 and script.aculo.us 1.8

How to implement itinclude the javascript files in your HEAD link the colorpicker.css file in your HEAD or Stylesheet add an input field holding the hex color value (without the leading #) initialize the ColorPicker
new Control.ColorPicker("colorFieldName");
Optionsswatch ... specify and ID of an element that will be used as a button to open the colorPicker popUp, and will also display the selected color as it's background.

IMAGE_BASE ... base URL where the images used for the ColorPicker are located (including the trailling slash)

Callback Description onOpen Called after the slider popUp is opened. onClose Called after the slider popUp is closed. onUpdate Called whenever a user picked a different color. If the user is dragging the slider, or the colorpicker (circle) the update occures onMouseMove. getPopUpPosition If you want to get control over the position of the colorPicker popUp you may provide this function. ColorPicker expects this function to return an Array with two number values x,y. getPopUpPosition will receive the open event (click) as the only argument. You may access all values and methods of ColorPicker via this.

Full Example
color 1 #

color 2 #

color 3 #

color 4 #

["1", "2", "3"].each(function(idx) {
new Control.ColorPicker("colorfield" + idx, { IMAGE_BASE : "img/" });
});
new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" });
WARNING: You must not call "new Control.ColorPicker()" unless you closed all wrapping block elements around the form (i.e. divs) - otherwise you will get an exception in IE6/7. If you need to so, use

Event.observe(window, "load", function() {
new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" })
});STYLESHEETTo make the ColorPicker work like it should, you also need to include the colorpicker.css file to your page.

This file defines the appearance of the ColorPicker PopUp and is using the following keys:

#colorpicker ... container for popUp (adapt width, hight, background to your needs) #colorpicker-hue-slider ... slider container (adapt width and height to your needs) #colorpicker-hue-bg-img ... slider bg #colorpicker-hue-thumb ... slider handle #colorpicker-div ... container for color picker area (adapt width, height to your needs) #colorpicker-bg ... color picker area #colorpicker-selector ... circle, that indicates the current color #colorpicker-footer ... container for OK button #colorpicker-value ... span containing the value input, prefixed by '#' #colorpicker-value-input ... input.text containing the current color value (without the #) #colorpicker-okbutton ... the blue OK button Who is using itTwitter (Settings > Design) blogr.com For customizing the design. madmimi.com Customize settings Booktour For a widget "follow this author: on my website" SuperSaaS For customizing calender layouts Please drop me a line, if you are using colorpicker.js (matthias.platzer AT knallgrau.at)

Creditswritten by Matthias Platzer AT knallgrau.at

inspired by YUI Color Picker script.

implemented using script.aculo.us, YUI Util color.js and some more EasyRGB math

Tags

colorpicker javascript prototype scriptaculous

In a Nutshell, colorpickerjs...

 No code available to analyze

Open Hub computes statistics on FOSS projects by examining source code and commit history in source code management systems. This project has no code locations, and so Open Hub cannot perform this analysis

Is this project's source code hosted in a publicly available repository? Do you know the URL? If you do, click the button below and tell us so that Open Hub can generate statistics! It's fast and easy - try it and see!

Add a code location

MIT License
Permitted

Commercial Use

Modify

Distribute

Sub-License

Private Use

Forbidden

Hold Liable

Required

Include Copyright

Include License

These details are provided for information only. No information here is legal advice and should not be used as such.

All Licenses

This Project has No vulnerabilities Reported Against it

Did You Know...

  • ...
    Black Duck offers a free trial so you can discover if there are open source vulnerabilities in your code
  • ...
    data presented on the Open Hub is available through our API
  • ...
    65% of companies leverage OSS to speed application development in 2016
  • ...
    anyone with an Open Hub account can update a project's tags

 No code available to analyze

Open Hub computes statistics on FOSS projects by examining source code and commit history in source code management systems. This project has no code locations, and so Open Hub cannot perform this analysis

Is this project's source code hosted in a publicly available repository? Do you know the URL? If you do, click the button below and tell us so that Open Hub can generate statistics! It's fast and easy - try it and see!

Add a code location

Community Rating

Be the first to rate this project
Click to add your rating
   Spinner
Review this Project!
Sample ohloh analysis