JSTags: blind effect tag

Description

This tag provides an easy way to simulate a window blind, where the contents of the affected elements stay in place.

Tag reference

Attribute name Description Default Required Valid values
shootersSelector String used to select the elements to which the event provided by the event attribute will be attached. If it is not set, the action will be performed as soon as the page is loaded, that is, the codeonload/code event of the window. false CSS selector expressions (i.e. div#menubar, .button). You may check MochiKit for further information.
targetId Identifier of the element the effect will be fired on. true
event Event name on which the effect will be fired. true event name (i.e. onclick, onmouseover).
beforeStart Call to the JavaScript function to be executed right before the effect starts. false i.e. myFunction(), myOtherFunction(3).
beforeSetup Call to the JavaScript function to be executed right before the effect is configured. false i.e. myFunction(), myOtherFunction(3).
beforeUpdate Call to the JavaScript function to be executed right before the target element is updated. false i.e. myFunction(), myOtherFunction(3).
afterUpdate Call to the JavaScript function to be executed right after the target element is updated. i.e. myFunction(), myOtherFunction(3).
beforeFinish Call to the JavaScript function to be executed right before the effect finishes. false i.e. myFunction(), myOtherFunction(3).
afterFinish Call to the JavaScript function to be executed right after the effect finishes.. false i.e. myFunction(), myOtherFunction(3).
transition Type of transition to be used with the effect. MochiKit.Visual.Transitions.sinoidal false MochiKit.Visual.Transitions.linear.
MochiKit.Visual.Transitions.sinoidal.
MochiKit.Visual.Transitions.reverse.
MochiKit.Visual.Transitions.flicker.
MochiKit.Visual.Transitions.wobble.
MochiKit.Visual.Transitions.pulse.
MochiKit.Visual.Transitions.none.
MochiKit.Visual.Transitions.full.
duration Time (in seconds) the effect will last. 1 false float.
fps Frames per second for the transition. Can't be higher than 25.0. 25.0 false float.
queue {queue: 'parallel' } false i.e.
global: {queue:'end'},
user defined: {queue: {position:'front'}}, {queue: {position: 'front', scope: 'myqueue'}}.
from The starting point of the transition. 0.0 false float between 0.0 and 1.0.
to The end point of the transition. 1.0 false float between 0.0 and 1.0.
delay How many seconds will pass before the effect starts executing. 0.0 false float higher than or equals to 0.0.
direction The direction in which the element will appear on the page. true Up (from top to bottom).
Down (from bottom to top).
scaleX Whether the element's width should change or not. false false true|false.
scaleY Whether the element's width should change or not. true false true|false.
scaleContent Whether the element's content should be modified during the effect or not. true false true|false.
scaleMode How the scale is done. Valid values are:
box (it scales the visible area of the element).
contents (scales the complete element).		 box false true|false.
scaleFrom Percentage of the element size the transition will start at. 100 false float between 0 and 100.
scaleTo Percentage of the element size the transition will end at. 0 false float between 0 and 100.

Note: all of the attributes accept runtime expressions.

Example

Go here to see an example.