.. title:: MochiKit.Visual - visual effects Name ==== MochiKit.Visual - visual effects Synopsis ======== :: // round the corners of all h1 elements roundClass("h1", null); // round the top left corner of the element with the id "title" roundElement("title", {corners: "tl"}); // Add an fade effect to an element fade('myelement'); Description =========== MochiKit.Visual provides visual effects and support functions for visuals. Dependencies ============ - :mochiref:`MochiKit.Base` - :mochiref:`MochiKit.Iter` - :mochiref:`MochiKit.DOM` - :mochiref:`MochiKit.Color` - :mochiref:`MochiKit.Position` Overview ======== 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 Rico_. Dynamic effects are ported from Scriptaculous_. .. _Rico: http://www.openrico.org .. _Scriptaculous: http://script.aculo.us API Reference ============= Functions --------- :mochidef:`roundClass(tagName[, className[, options]])`: Rounds all of the elements that match the ``tagName`` and ``className`` specifiers, using the options provided. ``tagName`` or ``className`` can be ``null`` to match all tags or classes. For more information about the options, see the :mochiref:`roundElement` function. *Availability*: Available in MochiKit 1.3.1+ :mochidef:`roundElement(element[, options])`: 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. The options mapping has the following defaults: ========= ================= corners ``"all"`` color ``"fromElement"`` bgColor ``"fromParent"`` blend ``true`` border ``false`` compact ``false`` ========= ================= corners: specifies which corners of the element should be rounded. Choices are: - all - top - bottom - tl (top left) - bl (bottom left) - tr (top right) - br (bottom right) Example: ``"tl br"``: top-left and bottom-right corners are rounded blend: specifies whether the color and background color should be blended together to produce the border color. *Availability*: Available in MochiKit 1.3.1+ :mochidef:`toggle(element[, effect[, options]])`: Toggle an element between visible and invisible state using an effect. effect: One of the visual pairs to use, between 'slide', 'blind', 'appear', and 'size'. *Availability*: Available in MochiKit 1.4+ :mochidef:`tagifyText(element[, tagifyStyle])`: Transform a node text into nodes containing one letter by tag. tagifyStyle: style to apply to character nodes, default to 'position: relative'. *Availability*: Available in MochiKit 1.4+ :mochidef:`multiple(elements, effect[, options])`: Launch the same effect on a list of elements. *Availability*: Available in MochiKit 1.4+ Basic Effects classes --------------------- :mochidef:`DefaultOptions`: Default options for all Effect creation. =========== ======================================== transition ``MochiKit.Visual.Transitions.sinoidal`` duration ``1.0`` fps ``25.0`` sync ``false`` from ``0.0`` to ``1.0`` delay ``0.0`` queue ``'parallel'`` =========== ======================================== *Availability*: Available in MochiKit 1.4+ :mochidef:`Base()`: Base class to all effects. Define a basic looping service, use it for creating new effects. You can override the methods ``setup``, ``update`` and ``finish```. The class defines a number of events that will be called during effect life. The events are: - beforeStart - beforeSetup - beforeUpdate - afterUpdate - beforeFinish - afterFinish If you want to define your own callbacks, define it in the options parameter of the effect. Example:: // I slide it up and then down again slideUp('myelement', {afterFinish: function () { slideDown('myelement'); }); Specific ``internal`` 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). *Availability*: Available in MochiKit 1.4+ :mochidef:`Parallel(effects [, options])`: Launch effects in parallel. *Availability*: Available in MochiKit 1.4+ :mochidef:`Opacity(element [, options])`: Change the opacity of an element progressively. options: ====== ======== from ``0.0`` to ``1.0`` ====== ======== *Availability*: Available in MochiKit 1.4+ :mochidef:`Move(element [, options])`: Change the position of an element in small steps, creating a moving effect. options: ========= ================ x ``0`` y ``0`` position ``'relative'`` ========= ================ *Availability*: Available in MochiKit 1.4+ :mochidef:`Scale(element, percent [, options])`: Change the size of an element. percent: 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. options: ================ ============ scaleX ``true`` scaleY ``true`` scaleContent ``true`` scaleFromCenter ``false`` scaleMode ``'box'`` scaleFrom ``100.0`` scaleTo ``percent`` ================ ============ *Availability*: Available in MochiKit 1.4+ :mochidef:`Highlight(element [, options])`: Highlight an element, flashing with one color. options: =========== ============== startcolor ``'#ffff99'`` =========== ============== *Availability*: Available in MochiKit 1.4+ :mochidef:`ScrollTo(element [, options])`: Scroll the window to the position of the given element. *Availability*: Available in MochiKit 1.4+ :mochidef:`Morph(element [, options])`: Make a transformation to the given element. It's called with the option ``style`` with an array holding the styles to change. It works with properties for size (``font-size``, ``border-width``, ...) and properties for color (``color``, ``background-color``, ...). For size, it's better to have defined the original style. You *must* use the same unit in the call to Morph (no translation exists between two different units). Parsed length are postfixed with: em, ex, px, in, cm, mm, pt, pc. Example::