We can't take all the credit for this one. It is heavily inspired by Color Jack 's color sphere, but rewritten, improved, optimized and simplified for the Mootools Javascript Framework.

Mootools Dependencies: If your website already contains some Mootools 1.2 stuff (from this wesite or elsewhere), then you're stoked because you can use a single Mootools library for everything. All you'll need is the UvumiTools Dock Menu script, and to make sure your library contains the following classes:

Initialization

new UvumiSphere(selector,options);

Arguments

Selector: string defining a CSS rule that will select the elements to be turned into color pickers. These elements should be text inputs in the beginning.

string defining a CSS rule that will select the elements to be turned into color pickers. These elements should be text inputs in the beginning. Options: an object that will allow you to modify some properties of the picker. As the name suggests, options are optional.



Options

defaultColor: If an input has no color value on initialization, the cursor should still have a default position. The default one is #ffffff (white), but you can set it to a different value, by passing an hexadecimal string here.

If an input has no color value on initialization, the cursor should still have a default position. The default one is (white), but you can set it to a different value, by passing an hexadecimal string here. specterImage: If you customize the sphere with a new background image, or rename/move it, the script needs to know because it tries to preload it on intialization. This is not required for the script, this is only for a better looking result and if you want to update this value, you must specify a path, absolute or relative to the document (not to the javascript file). The default value is css/circle.jpg because that's where the file is assumed to be when you download the package.

If you customize the sphere with a new background image, or rename/move it, the script needs to know because it tries to preload it on intialization. This is not required for the script, this is only for a better looking result and if you want to update this value, you must specify a path, absolute or relative to the document (not to the javascript file). The default value is because that's where the file is assumed to be when you download the package. cursorImage: Like the specterImage, the script tries to preload the images required by the CSS so they show up instantly the first time you display the sphere. This option is for the circular cursor. The default is css/miniCurr.gif . So you must have an image file at this location, or set this option.

Like the specterImage, the script tries to preload the images required by the CSS so they show up instantly the first time you display the sphere. This option is for the circular cursor. The default is . So you must have an image file at this location, or set this option. buttonText: The source inputs are replaced by <button> elements. This indicates what should be written in the button. The default is "Pick" , but you can write whatever you want, including an image tag (yes, it is valid). Don't forget you can also style those buttons in the provided CSS file.

The source inputs are replaced by <button> elements. This indicates what should be written in the button. The default is , but you can write whatever you want, including an image tag (yes, it is valid). Don't forget you can also style those buttons in the provided CSS file. onChange: This option recieves a function. The function will be executed everytime the sphere's cursor is moved. You can use this function to do anything javascript will allow, including modifying the color of an HTML element, because it receives the the new color value and the source input as arguments. See the last example to see how this option works.

This option recieves a function. The function will be executed everytime the sphere's cursor is moved. You can use this function to do anything javascript will allow, including modifying the color of an HTML element, because it receives the the new color value and the source input as arguments. See the last example to see how this option works. onComplete: Same is onChange, except it is only fired when the cursor is released. It is useful to have two separate functions, because onChange will be fired much more often than onComplete (every time the cursor is color cursor moves actually). This way you can set the simple tasks to onChange (like updating an element's color), and do the big stuff when the color has been picked in the onComplete function (like submitting the new color value to the server).

Implementation

First, you simply import the files provided in the zip archive into your document. While you can insert <script> tags anywhere, we recommend you put them inside the <head> tag of your document:

<head>

<link rel ="stylesheet" type ="text/css" media ="screen" href ="css/uvumi-sphere.css" />

<script type ="text/javascript" src ="js/mootools-for-sphere.js" > </script>

<script type ="text/javascript" src ="js/UvumiSphere.js" > </script> </head>

Then you must prepare the HTML code for your ColorSphere. For one color, all it requires is a single text input. Let's say we want the color to be set to pure red the first time you open the picker. So we set the input value to "#f00". We suppose the reason you pick a color is to submit it to a server, so we put this input inside a form.

<form id ="color-form" action ="submit-color.php" method ="post" > <p>

<input id =" color-input " name ="color" type ="text" value ="#F00" /> </p>

<p> <button type ="submit" > Send </button> </p> </form> ="color-form"="submit-color.php"="post"

So far we have a form that will send a value named 'color' as a 'POST' parameter to the script 'submit-color.php', which is a name we just made up. It will be your job to write a server-side script to catch this value and do something useful with it. The value for 'color' is '#F00' unless the user types in something else. Techinically it is functional and could totaly work as it is.

Then we are ready to initialize the sphere script. By default, the sphere recieves only one argument, the selector. The selector is a string that works like a CSS rule. Using the exact same syntax, it will tell the script which HTML elements it should apply to. In our case there is only one input, so we are going to use a '#' for id selection, but you can create more complex rules, using tags and class selections. If you are familiar with CSS styling, this should not be a problem for you.



<script type ="text/javascript" > new UvumiSphere('input# color-input '); </script> ="text/javascript"

In the end, we put everything together. Mootools requires a strict Doctype to work properly. We get something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html> <head> <link rel ="stylesheet" type ="text/css" media ="screen" href ="css/uvumi-sphere.css" />

<script type ="text/javascript" src ="js/mootools-for-sphere.js" > </script>

<script type ="text/javascript" src ="js/UvumiSphere.js" > </script>

<script type ="text/javascript" > new UvumiSphere('input# color-input '); </script> ="stylesheet"="text/css"="screen"="css/uvumi-sphere.css"="text/javascript"="js/mootools-for-sphere.js"="text/javascript"="js/UvumiSphere.js"="text/javascript" </head>

<body> <div>

<form id ="color-form" action ="submit-color.php" method ="post" > <p> <input id =" color-input " name ="color" type ="text" value ="#F00" /> </p>

<p> <button type ="submit" > Send </button> </p> </form> ="color-form"="submit-color.php"="post" </div> </body> </html>

Technically speaking, that should work. The text input will be virtually replaced with a 'pick' button. Virtally, because the input still exists, it is simply hidden. It will be constantly updated, and submited along with the form.

This is for the default, simple usage. We are going to see how to apply the sphere to several inputs. Let's say we have four color inputs this time, all needing the ColorSphere.

We saw how to use an ID selector. We could use an ID selector again, by just listing the inputs IDs, separated by commas: #input1,#inpu2,#input3,#input4. It will work, but we can use any CSS rule (including advanced CSS3 rules that are not even supported by all browsers).

We could use a rule to apply the sphere to any input inside the form: form#color-form input . Problem is, this will turn every input tag into color pickers, even if they are checkboxes or radio buttons. Probably not what we want.

The best way to filter the inputs we want is to use the class property: we add a class to the inputs we want to apply the sphere to, and we use this class in the selector, thanks to the dot character:

<form id ="color-form" action ="submit-color.php" method ="post" > <p> <input class =" color-input " name ="color1" type ="text" value ="#F00" />

<input class =" color-input " name ="color2" type ="text" value ="#0F0" />

<input class =" color-input " name ="color3" type ="text" value ="#00F" /> </p>

<p> <button type ="submit" > Send </button> </p> </form> ="color-form"="submit-color.php"="post"



<script type ="text/javascript" > new UvumiSphere(' .color-input '); </script> ="text/javascript"

If we have two forms, and we went a separate picker for each, we can create two instances (eventually with different options), and specify in the css rules which form they should affect: