[dygraphs.git] / mochikit_v14 / doc / html / MochiKit / Visual.html

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.4.1: http://docutils.sourceforge.net/" />
<title>MochiKit.Visual - visual effects</title>

<link rel="stylesheet" href="../../../include/css/documentation.css" type="text/css" />
<script type="text/javascript" src="../../../packed/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="../../js/toc.js"></script>
</head>
<body>
<div class="document">
<div class="section">
<h1><a id="name" name="name">Name</a></h1>
<p>MochiKit.Visual - visual effects</p>
</div>
<div class="section">
<h1><a id="synopsis" name="synopsis">Synopsis</a></h1>
<pre class="literal-block">
// round the corners of all h1 elements
roundClass(&quot;h1&quot;, null);

// round the top left corner of the element with the id &quot;title&quot;
roundElement(&quot;title&quot;, {corners: &quot;tl&quot;});

// Add an fade effect to an element
fade('myelement');
</pre>
</div>
<div class="section">
<h1><a id="description" name="description">Description</a></h1>
<p>MochiKit.Visual provides visual effects and support functions for
visuals.</p>
</div>
<div class="section">
<h1><a id="dependencies" name="dependencies">Dependencies</a></h1>
<ul class="simple">
<li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li>
<li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a></li>
<li><a class="mochiref reference" href="DOM.html">MochiKit.DOM</a></li>
<li><a class="mochiref reference" href="Color.html">MochiKit.Color</a></li>
<li><a class="mochiref reference" href="Position.html">MochiKit.Position</a></li>
</ul>
</div>
<div class="section">
<h1><a id="overview" name="overview">Overview</a></h1>
<p>MochiKit.Visual provides different visual effect: rounded corners and
animations for your HTML elements. Rounded corners are created
completely through CSS manipulations and require no external images or
style sheets.  This implementation was adapted from <a class="reference" href="http://www.openrico.org">Rico</a>. Dynamic
effects are ported from <a class="reference" href="http://script.aculo.us">Scriptaculous</a>.</p>
</div>
<div class="section">
<h1><a id="api-reference" name="api-reference">API Reference</a></h1>
<div class="section">
<h2><a id="functions" name="functions">Functions</a></h2>
<p>
<a name="fn-roundclass"></a>
<a class="mochidef reference" href="#fn-roundclass">roundClass(tagName[, className[, options]])</a>:</p>
<blockquote>
<p>Rounds all of the elements that match the <tt class="docutils literal"><span class="pre">tagName</span></tt> and
<tt class="docutils literal"><span class="pre">className</span></tt> specifiers, using the options provided.  <tt class="docutils literal"><span class="pre">tagName</span></tt>
or <tt class="docutils literal"><span class="pre">className</span></tt> can be <tt class="docutils literal"><span class="pre">null</span></tt> to match all tags or classes.
For more information about the options, see the
<a class="mochiref reference" href="#fn-roundelement">roundElement</a> function.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.3.1+</dd>
</dl>
</blockquote>
<p>
<a name="fn-roundelement"></a>
<a class="mochidef reference" href="#fn-roundelement">roundElement(element[, options])</a>:</p>
<blockquote>
<p>Immediately round the corners of the specified element.  The
element can be given as either a string with the element ID, or as
an element object.</p>
<p>The options mapping has the following defaults:</p>
<table border="1" class="docutils">
<colgroup>
<col width="35%" />
<col width="65%" />
</colgroup>
<tbody valign="top">
<tr><td>corners</td>
<td><tt class="docutils literal"><span class="pre">&quot;all&quot;</span></tt></td>
</tr>
<tr><td>color</td>
<td><tt class="docutils literal"><span class="pre">&quot;fromElement&quot;</span></tt></td>
</tr>
<tr><td>bgColor</td>
<td><tt class="docutils literal"><span class="pre">&quot;fromParent&quot;</span></tt></td>
</tr>
<tr><td>blend</td>
<td><tt class="docutils literal"><span class="pre">true</span></tt></td>
</tr>
<tr><td>border</td>
<td><tt class="docutils literal"><span class="pre">false</span></tt></td>
</tr>
<tr><td>compact</td>
<td><tt class="docutils literal"><span class="pre">false</span></tt></td>
</tr>
</tbody>
</table>
<p>corners:</p>
<blockquote>
<p>specifies which corners of the element should be rounded.
Choices are:</p>
<ul class="simple">
<li>all</li>
<li>top</li>
<li>bottom</li>
<li>tl (top left)</li>
<li>bl (bottom left)</li>
<li>tr (top right)</li>
<li>br (bottom right)</li>
</ul>
<dl class="docutils">
<dt>Example:</dt>
<dd><tt class="docutils literal"><span class="pre">&quot;tl</span> <span class="pre">br&quot;</span></tt>: top-left and bottom-right corners are rounded</dd>
</dl>
</blockquote>
<dl class="docutils">
<dt>blend:</dt>
<dd>specifies whether the color and background color should be
blended together to produce the border color.</dd>
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.3.1+</dd>
</dl>
</blockquote>
<p>
<a name="fn-toggle"></a>
<a class="mochidef reference" href="#fn-toggle">toggle(element[, effect[, options]])</a>:</p>
<blockquote>
<p>Toggle an element between visible and invisible state using an effect.</p>
<dl class="docutils">
<dt>effect:</dt>
<dd>One of the visual pairs to use, between 'slide', 'blind',
'appear', and 'size'.</dd>
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-tagifytext"></a>
<a class="mochidef reference" href="#fn-tagifytext">tagifyText(element[, tagifyStyle])</a>:</p>
<blockquote>
<p>Transform a node text into nodes containing one letter by tag.</p>
<dl class="docutils">
<dt>tagifyStyle:</dt>
<dd>style to apply to character nodes, default to 'position:
relative'.</dd>
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-multiple"></a>
<a class="mochidef reference" href="#fn-multiple">multiple(elements, effect[, options])</a>:</p>
<blockquote>
<p>Launch the same effect on a list of elements.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
</div>
<div class="section">
<h2><a id="basic-effects-classes" name="basic-effects-classes">Basic Effects classes</a></h2>
<p>
<a name="fn-defaultoptions"></a>
<a class="mochidef reference" href="#fn-defaultoptions">DefaultOptions</a>:</p>
<blockquote>
<p>Default options for all Effect creation.</p>
<table border="1" class="docutils">
<colgroup>
<col width="22%" />
<col width="78%" />
</colgroup>
<tbody valign="top">
<tr><td>transition</td>
<td><tt class="docutils literal"><span class="pre">MochiKit.Visual.Transitions.sinoidal</span></tt></td>
</tr>
<tr><td>duration</td>
<td><tt class="docutils literal"><span class="pre">1.0</span></tt></td>
</tr>
<tr><td>fps</td>
<td><tt class="docutils literal"><span class="pre">25.0</span></tt></td>
</tr>
<tr><td>sync</td>
<td><tt class="docutils literal"><span class="pre">false</span></tt></td>
</tr>
<tr><td>from</td>
<td><tt class="docutils literal"><span class="pre">0.0</span></tt></td>
</tr>
<tr><td>to</td>
<td><tt class="docutils literal"><span class="pre">1.0</span></tt></td>
</tr>
<tr><td>delay</td>
<td><tt class="docutils literal"><span class="pre">0.0</span></tt></td>
</tr>
<tr><td>queue</td>
<td><tt class="docutils literal"><span class="pre">'parallel'</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-base"></a>
<a class="mochidef reference" href="#fn-base">Base()</a>:</p>
<blockquote>
<p>Base class to all effects. Define a basic looping service, use it
for creating new effects.</p>
<p>You can override the methods <tt class="docutils literal"><span class="pre">setup</span></tt>, <tt class="docutils literal"><span class="pre">update</span></tt> and <tt class="docutils literal"><span class="pre">finish`</span></tt>.</p>
<p>The class defines a number of events that will be called during effect
life. The events are:</p>
<ul class="simple">
<li>beforeStart</li>
<li>beforeSetup</li>
<li>beforeUpdate</li>
<li>afterUpdate</li>
<li>beforeFinish</li>
<li>afterFinish</li>
</ul>
<p>If you want to define your own callbacks, define it in the options
parameter of the effect. Example:</p>
<pre class="literal-block">
// I slide it up and then down again
slideUp('myelement', {afterFinish: function () {
    slideDown('myelement');
});
</pre>
<p>Specific <tt class="docutils literal"><span class="pre">internal</span></tt> events are also available: for each one abone the
same exists with 'Internal' (example: 'beforeStartInternal'). Their purpose
is mainly for creating your own effect and keep the user access to event
callbacks (not overriding the library ones).</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-parallel"></a>
<a class="mochidef reference" href="#fn-parallel">Parallel(effects [, options])</a>:</p>
<blockquote>
<p>Launch effects in parallel.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-opacity"></a>
<a class="mochidef reference" href="#fn-opacity">Opacity(element [, options])</a>:</p>
<blockquote>
<p>Change the opacity of an element progressively.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="43%" />
<col width="57%" />
</colgroup>
<tbody valign="top">
<tr><td>from</td>
<td><tt class="docutils literal"><span class="pre">0.0</span></tt></td>
</tr>
<tr><td>to</td>
<td><tt class="docutils literal"><span class="pre">1.0</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-move"></a>
<a class="mochidef reference" href="#fn-move">Move(element [, options])</a>:</p>
<blockquote>
<p>Change the position of an element in small steps, creating a
moving effect.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="36%" />
<col width="64%" />
</colgroup>
<tbody valign="top">
<tr><td>x</td>
<td><tt class="docutils literal"><span class="pre">0</span></tt></td>
</tr>
<tr><td>y</td>
<td><tt class="docutils literal"><span class="pre">0</span></tt></td>
</tr>
<tr><td>position</td>
<td><tt class="docutils literal"><span class="pre">'relative'</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-scale"></a>
<a class="mochidef reference" href="#fn-scale">Scale(element, percent [, options])</a>:</p>
<blockquote>
<p>Change the size of an element.</p>
<dl class="docutils">
<dt>percent:</dt>
<dd>Final wanted size in percent of current size. The size will be
reduced if the value is between 0 and 100, and raised if the
value is above 100.</dd>
</dl>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="57%" />
<col width="43%" />
</colgroup>
<tbody valign="top">
<tr><td>scaleX</td>
<td><tt class="docutils literal"><span class="pre">true</span></tt></td>
</tr>
<tr><td>scaleY</td>
<td><tt class="docutils literal"><span class="pre">true</span></tt></td>
</tr>
<tr><td>scaleContent</td>
<td><tt class="docutils literal"><span class="pre">true</span></tt></td>
</tr>
<tr><td>scaleFromCenter</td>
<td><tt class="docutils literal"><span class="pre">false</span></tt></td>
</tr>
<tr><td>scaleMode</td>
<td><tt class="docutils literal"><span class="pre">'box'</span></tt></td>
</tr>
<tr><td>scaleFrom</td>
<td><tt class="docutils literal"><span class="pre">100.0</span></tt></td>
</tr>
<tr><td>scaleTo</td>
<td><tt class="docutils literal"><span class="pre">percent</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-highlight"></a>
<a class="mochidef reference" href="#fn-highlight">Highlight(element [, options])</a>:</p>
<blockquote>
<p>Highlight an element, flashing with one color.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="44%" />
<col width="56%" />
</colgroup>
<tbody valign="top">
<tr><td>startcolor</td>
<td><tt class="docutils literal"><span class="pre">'#ffff99'</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-scrollto"></a>
<a class="mochidef reference" href="#fn-scrollto">ScrollTo(element [, options])</a>:</p>
<blockquote>
<p>Scroll the window to the position of the given element.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-morph"></a>
<a class="mochidef reference" href="#fn-morph">Morph(element [, options])</a>:</p>
<blockquote>
<p>Make a transformation to the given element. It's called with the option
<tt class="docutils literal"><span class="pre">style</span></tt> with an array holding the styles to change. It works with
properties for size (<tt class="docutils literal"><span class="pre">font-size</span></tt>, <tt class="docutils literal"><span class="pre">border-width</span></tt>, ...) and properties
for color (<tt class="docutils literal"><span class="pre">color</span></tt>, <tt class="docutils literal"><span class="pre">background-color</span></tt>, ...).</p>
<p>For size, it's better to have defined the original style. You <em>must</em>
use the same unit in the call to Morph (no translation exists between two
different units).</p>
<p>Parsed length are postfixed with: em, ex, px, in, cm, mm, pt, pc.</p>
<p>Example:</p>
<pre class="literal-block">
&lt;div id=&quot;foo&quot; style=&quot;font-size: 1em&quot;&gt;MyDiv&lt;/div&gt;
...
Morph(&quot;foo&quot;, {&quot;style&quot;: {&quot;font-size&quot;: &quot;2em&quot;}});
</pre>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
</div>
<div class="section">
<h2><a id="combination-effects" name="combination-effects">Combination Effects</a></h2>
<p>
<a name="fn-fade"></a>
<a class="mochidef reference" href="#fn-fade">fade(element [, options])</a>:</p>
<blockquote>
<p>Change the opacity of an element until making it disappear.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="88%" />
</colgroup>
<tbody valign="top">
<tr><td>from</td>
<td><tt class="docutils literal"><span class="pre">element.opacity</span> <span class="pre">||</span> <span class="pre">1.0</span></tt></td>
</tr>
<tr><td>to</td>
<td><tt class="docutils literal"><span class="pre">0.0</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-appear"></a>
<a class="mochidef reference" href="#fn-appear">appear(element [, options])</a>:</p>
<blockquote>
<p>Slowly show an invisible element.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="36%" />
<col width="64%" />
</colgroup>
<tbody valign="top">
<tr><td>from</td>
<td><tt class="docutils literal"><span class="pre">0.0</span></tt></td>
</tr>
<tr><td>to</td>
<td><tt class="docutils literal"><span class="pre">1.0</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-puff"></a>
<a class="mochidef reference" href="#fn-puff">puff(element [, options])</a>:</p>
<blockquote>
<p>Make an element double size, and then make it disappear.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-blindup"></a>
<a class="mochidef reference" href="#fn-blindup">blindUp(element [, options])</a>:</p>
<blockquote>
<p>Blind an element up, changing its vertical size to 0.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-blinddown"></a>
<a class="mochidef reference" href="#fn-blinddown">blindDown(element [, options])</a>:</p>
<blockquote>
<p>Blind an element down, restoring its vertical size.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-switchoff"></a>
<a class="mochidef reference" href="#fn-switchoff">switchOff(element [, options])</a>:</p>
<blockquote>
<p>A switch-off like effect, making the element disappear.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-dropout"></a>
<a class="mochidef reference" href="#fn-dropout">dropOut(element [, options])</a>:</p>
<blockquote>
<p>Make the element fall and fade.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="53%" />
<col width="47%" />
</colgroup>
<tbody valign="top">
<tr><td>distance</td>
<td><tt class="docutils literal"><span class="pre">100</span></tt></td>
</tr>
</tbody>
</table>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-shake"></a>
<a class="mochidef reference" href="#fn-shake">shake(element [, options])</a>:</p>
<blockquote>
<p>Shake an element from left to right.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-slidedown"></a>
<a class="mochidef reference" href="#fn-slidedown">slideDown(element [, options])</a>:</p>
<blockquote>
<p>Slide an element down.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-slideup"></a>
<a class="mochidef reference" href="#fn-slideup">slideUp(element [, options])</a>:</p>
<blockquote>
<p>Slide an element up.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-squish"></a>
<a class="mochidef reference" href="#fn-squish">squish(element [, options])</a>:</p>
<blockquote>
<p>Reduce the horizontal and vertical sizes at the same time, using
the top left corner.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-grow"></a>
<a class="mochidef reference" href="#fn-grow">grow(element [, options])</a>:</p>
<blockquote>
<p>Restore the size of an element.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-shrink"></a>
<a class="mochidef reference" href="#fn-shrink">shrink(element [, options])</a>:</p>
<blockquote>
<p>Shrink an element to its center.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-pulsate"></a>
<a class="mochidef reference" href="#fn-pulsate">pulsate(element [, options])</a>:</p>
<blockquote>
<p>Switch an element between appear and fade.</p>
<p>options:</p>
<table border="1" class="docutils">
<colgroup>
<col width="43%" />
<col width="57%" />
</colgroup>
<tbody valign="top">
<tr><td>pulses</td>
<td><tt class="docutils literal"><span class="pre">null</span></tt></td>
</tr>
</tbody>
</table>
<p>pulses controls the number of pulses made during the effect.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
<p>
<a name="fn-fold"></a>
<a class="mochidef reference" href="#fn-fold">fold(element [, options])</a>:</p>
<blockquote>
<p>Reduce first the vertical size, and then the horizontal size.</p>
<dl class="docutils">
<dt><em>Availability</em>:</dt>
<dd>Available in MochiKit 1.4+</dd>
</dl>
</blockquote>
</div>
<div class="section">
<h2><a id="the-effects-queue" name="the-effects-queue">The Effects Queue</a></h2>
<p>When you create effects based on user input (mouse clicks for example), it can
create conflicts between the effects if multiple effects are running at the
same time. To manage this problem, the Queue mechanism has been introduced:
it's responsible for running the effects as you desired.</p>
<p>By default, you have one Queue called 'global', and the effects run in 'parallel'
(see default options). Every effects have a queue option to customize this.
It can be a string, the scope is then global:</p>
<ul class="simple">
<li><cite>start</cite>: the effect will be run before any other;</li>
<li><cite>end</cite>: the effect will be run after any other;</li>
<li><cite>break</cite>: every other effects break when the the effect start;</li>
<li><cite>parallel</cite>: the effect run normally with others.</li>
</ul>
<p>But you have even more control if you use an array with the following keys:</p>
<ul class="simple">
<li><cite>position</cite> takes a value listed above;</li>
<li><cite>scope</cite> manages how the information has to be taken. If it's <cite>global</cite>
then it's the same information for every effects. Otherwise you can define
your own scode. For example, if you add an effect on a specified element,
you may use the element id as scode;</li>
<li><cite>limit</cite> defines how many effects can run in the current scode. If an
effect is added whereas the limit is reached, it will never be run (it's
lost).</li>
</ul>
</div>
</div>
<div class="section">
<h1><a id="see-also" name="see-also">See Also</a></h1>
<table class="docutils footnote" frame="void" id="id1" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a name="id1">[1]</a></td><td>Application Kit Reference - NSColor: <a class="reference" href="http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/ObjC_classic/Classes/NSColor.html">http://developer.apple.com/documentation/Cocoa/Reference/ApplicationKit/ObjC_classic/Classes/NSColor.html</a></td></tr>
</tbody>
</table>
<table class="docutils footnote" frame="void" id="id2" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a name="id2">[2]</a></td><td>SVG 1.0 color keywords: <a class="reference" href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">http://www.w3.org/TR/SVG/types.html#ColorKeywords</a></td></tr>
</tbody>
</table>
<table class="docutils footnote" frame="void" id="id3" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a name="id3">[3]</a></td><td>W3C CSS3 Color Module: <a class="reference" href="http://www.w3.org/TR/css3-color/#svg-color">http://www.w3.org/TR/css3-color/#svg-color</a></td></tr>
</tbody>
</table>
</div>
<div class="section">
<h1><a id="authors" name="authors">Authors</a></h1>
<ul class="simple">
<li>Kevin Dangoor &lt;<a class="reference" href="mailto:dangoor&#64;gmail.com">dangoor&#64;gmail.com</a>&gt;</li>
<li>Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;</li>
<li>Thomas Herve &lt;<a class="reference" href="mailto:therve&#64;gmail.com">therve&#64;gmail.com</a>&gt;</li>
<li>Round corners originally adapted from Rico &lt;<a class="reference" href="http://openrico.org/">http://openrico.org/</a>&gt;
(though little remains)</li>
<li>Effects originally adapted from Script.aculo.us
&lt;<a class="reference" href="http://script.aculo.us/">http://script.aculo.us/</a>&gt;</li>
</ul>
</div>
<div class="section">
<h1><a id="copyright" name="copyright">Copyright</a></h1>
<p>Copyright 2005 Bob Ippolito &lt;<a class="reference" href="mailto:bob&#64;redivi.com">bob&#64;redivi.com</a>&gt;.  This program is
dual-licensed free software; you can redistribute it and/or modify it
under the terms of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> or the <a class="reference" href="http://www.opensource.org/licenses/afl-2.1.php">Academic Free License
v2.1</a>.</p>
<p>Portions adapted from <a class="reference" href="http://www.openrico.org">Rico</a> are available under the terms of the
<a class="reference" href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache License, Version 2.0</a>.</p>
<p>Portions adapted from <a class="reference" href="http://script.aculo.us">Scriptaculous</a> are available under the terms
of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.</p>
</div>
</div>

</body>
</html>