Defines styles used to control transition effects.
| Control | Description | Options | Property |
|---|---|---|---|
| Marquee style | The type of marquee. | alternate, none, scroll, slide | theme_effect_prop.html#mcs-marquee-style |
| Marquee direction | The initial direction in which a marquee content will move. | left, right | theme_effect_prop.html#mcs-marquee-direction |
| Marquee repetition | The number of times that the content will move across the screen. The default value is '1'. | infinite, <integer> | theme_effect_prop.html#mcs-marquee-repetition |
| Marquee velocity | Specifies the velocity that a marquee content will move across the screen. A negative velocity value will reverse the direction of movement. | normal, <length>, <length>/<time> | theme_effect_prop.html#mcs-marquee-speed |
| Frame rate | Specifies the frequency in Hz or kHz that is required when displaying visual effects such as transitions, or scrolling. The device policy value x-client.frame.rate.max sets an overriding limit. | <frequency> | theme_effect_prop.html#mcs-frame-rate |
| Effect duration | The duration in seconds of the effect applied to an element. | <time> | theme_effect_prop.html#mcs-effect-duration |
| Effect style | Specifies the transition effects. Refer to the notes in theme_effect_prop.html#mcs-effect-style for more information. | The Client Framework 1-specific values: dropout, fade, grow-center, grow-top-left, grow-top-right, grow-bottom-left, grow-bottom-right, highlight, none, puff, pulsate, random, shake, shrink-center, shrink-top-left, shrink-top-right, shrink-bottom-left, shrink-bottom-right, slide-left, slide-right, slide-top, slide-bottom, wipe-top The Client Framework 2-specific values: slide(left), slide(right), slide(top), slide(bottom), wipe(left), wipe(right), wipe(top), wipe(bottom) |
theme_effect_prop.html#mcs-effect-style |
| Transition interval | The duration in seconds of the content replacement in a Carousel widget. | <time> | theme_effect_prop.html#mcs-transition-interval |
| Widget initial state | Specifies the initial state of a widget. | active, inactive | theme_effect_prop.html#mcs-initial-state |
| Toggle event | Describes the event on which a submenu will be unfolded. Used by the Folding Item, Field Expander, and Dynamic Menu widgets. | click, focus | theme_effect_prop.html#mcs-toggle-event |
| Validation error action | Specifies actions that should occur after a validation failure. Used by the Simple and Multiple Forms Validator widget. Applies to the input element. | focus, message, none | theme_effect_prop.html#mcs-validation-error-action |
| Cancelable | Each wizard step may optionally include this 'Cancel' action. Applies to xforms:group and widget:wizard. | always, never | theme_effect_prop.html#mcs-cancelable |
| Rounded edgess | Allows selectors to be displayed with curved edges. The first value defines the horizontal radius of the selected edge, while the second specifies its vertical radius. When the second value is not specified, then it is assumed to be equal to the first one. If either value is zero, then the edge is sharpened. Negative values are not allowed. Refer to the topic entitled Rounded corners for details. |
<length> | theme_effect_prop.html#mcs-border-radius or theme_effect_prop.html#mcs-border-radius-all |
The use of the Marquee style, Marquee direction, Marquee repetition and Marquee velocity properties with elements other than the Client Framework 1 widgets is deprecated.
Allows boxes to be displayed with rounded corners. The property accepts a single value which controls all four corners of an element. See also: Rounded corners.
| Option | Description |
|---|---|
| <length> | Defines the radius of the corners. |
| inherit | The value of the property should be inherited from the parent element. |
Allows boxes to be displayed with rounded corners. The first value of the property defines the horizontal radius of the selected corner, while the second specifies its vertical radius. When the second value is not specified, then it is assumed to be equal to the first one and the corner is thus a quarter circle. If either value is zero, then the corner is squared. Negative values are not allowed. The default value is '0 0'. See also: Rounded corners.
| Option | Description |
|---|---|
| <length> | Defines horizontal/vertical radius of the selected corner. |
| inherit | The value of the property should be inherited from the parent element. |
Each wizard step may optionally include a 'Cancel' action. This property applies to xforms:group and widget:wizard. The default value is 'always'. See also: Using the Forms Wizard.
| Option | Description |
|---|---|
| always | Indicates that the 'Cancel' action should be included on each wizard step. |
| never | Indicates that the 'Cancel' action should not be included on each wizard step. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the duration of the effect applied to an element. The default value is 1 second.
| Option | Description |
|---|---|
| <time> | The duration in seconds of the effect applied to the element. |
| inherit | The value of the property should be inherited from the parent element. |
Controls the transition effects. The default value is 'none'.
This property supports two syntaxes, one for use with the Client Framework 1 widgets, and the other for use with the Client Framework 2 components. When the property is used in conjunction with the Client Framework 1 widgets, it accepts a sequence of comma separated rules and supports the random() function. Refer to Specifying a sequence of effects and Applying random effects for more information.
The Client Framework 1-specific syntax and values are deprecated.
The property supports the following values when used with the Client Framework 1 widgets:
| Option | Description |
|---|---|
| dropout | The box drops and fades out. |
| fade | The box fades in when appearing and fades out when disappearing. |
| fold-top-left | The box folds to the specified corner. |
| grow-center, grow-top-left, grow-top-right, grow-bottom-left, grow-bottom-right | The box grows either from the center or from one of the corners. |
| highlight | The box background color changes. |
| puff | The box expands and fades away. |
| pulsate | The box repeatedly fades in and out. |
| slide-left, slide-right, slide-top, slide-bottom | A slide effect to or from the specific edge. |
| shake | The box shakes horizontally. |
| shrink-center, shrink-top-left, shrink-top-right, shrink-bottom-left, shrink-bottom-right | The box shrinks either to the center or to one of the corners. |
| wipe-top | A wipe effect to or from the specific edge. |
| none | No effect is used, the box simply appears or disappears immediately. |
| random() | Indicates that transition effects should be applied randomly. Refer to Applying random effects for more information. |
The property supports the following values when used with the Client Framework 2 components:
| Option | Description |
|---|---|
| slide(left), slide(right), slide(top), slide(bottom) | A slide effect to or from the specific edge. |
| wipe(left), wipe(right), wipe(top), wipe(bottom) | A wipe effect to or from the specific edge. |
| none | No effect is used, the box simply appears or disappears immediately. |
Specifies the frequency in Hz or kHz that is required when displaying visual effects such as transitions, or scrolling. The device policy value x-client.frame.rate.max sets a limit. The default value is '10Hz'.
| Option | Description |
|---|---|
| <frequency> | Specifies the frequency in Hz that is required when displaying visual effects such as transitions. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the initial state of a widget. The default value is 'inactive'.
| Option | Description |
|---|---|
| active | Indicates that, initially, the widget is active. |
| inactive | Indicates that, initially, the widget is inactive. |
| inherit | The value of the property should be inherited from the parent element. |
This is a shorthand property for: mcs-marquee-direction, mcs-marquee-repetition, mcs-marquee-speed, and mcs-marquee-style.
The use of the mcs-marquee property with elements other than the Client Framework 1 widgets is deprecated.
The property has the following syntax:
mcs-marquee: <mcs-marquee-direction> <mcs-marquee-repetition> <mcs-marquee-speed>
<mcs-marquee-style>;Sets the initial direction in which a marquee content will move.
The use of the mcs-marquee-direction property with elements other than the Client Framework 1 widgets is deprecated.
| Option | Description |
|---|---|
| left | The contents of the marquee will, initially, move from right to left. |
| right | The contents of the marquee will, initially, move from left to right. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the number of times a marquee content will move across the screen. The default value is '1'.
The use of the mcs-marquee-repetition property with elements other than the Client Framework 1 widgets is deprecated.
| Option | Description |
|---|---|
| infinite | Indicates that the content will move across the screen indefinitely. |
| <integer> | The number of times the content should move across the screen. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies how fast a marquee content will move across the screen. The default value is 'normal'.
The use of the mcs-marquee-speed property with elements other than the Client Framework 1 widgets is deprecated.
| Option | Description |
|---|---|
| fast | The content will move at a speed of about 110 pixels per second. |
| normal | The content will move at a speed of about 45 pixels per second. |
| slow | The content will move at a speed of about 7 pixels per second. |
| <length> | The velocity specified in the length units per second. |
| <length>/<time> | Specifies the velocity of the marquee content. |
| inherit | The value of the property should be inherited from the parent element. |
If the velocity is specified as <length> or <length>/<time>, then MCS will convert the value of the property to the corresponding keyword. The mapping between the keywords and velocity values is following example.
| Velocity | Keyword |
|---|---|
| (0, 26 px/s) | slow |
| [26 px/s, 77 px/s) | normal |
| [77 px/s, +oo) | fast |
Specifies the type of marquee. The default value is 'none'.
The use of the mcs-marquee-style property with elements other than the Client Framework 1 widgets is deprecated.
The overflow property must be set to 'scroll' for the mcs-marquee-style property to work properly.
| Option | Description |
|---|---|
| alternate | Indicates that the content should alternate from one side of the screen to the other. |
| none | The content does not move at all. |
| scroll | Content will move onto and then off the screen. |
| slide | Content will move onto the screen. |
| inherit | The value of the property should be inherited from the parent element. |
Describes the event on which a submenu should be unfolded. Used by the Folding Item, Field Expander, and Dynamic Menu widgets. The default value is 'focus'.
| Option | Description |
|---|---|
| click | Indicates that the submenu should be unfolded when it is clicked. |
| focus | Indicates that the submenu should be unfolded when it receives focus. |
| inherit | The value of the property should be inherited from the parent element. |
Specifies the duration in seconds of the content replacement in a Carousel widget. The default value is '1s'. See also: Creating a carousel.
| Option | Description |
|---|---|
| <time> | The duration of the content replacement. |
| inherit | The value of the property should be inherited from the parent element. |
Controls actions that will occur after a validation failure. Used by the Simple and Multiple Forms Validator widget. Applies to the input element. The default value is 'none'. See also: Using forms validator widgets.
| Option | Description |
|---|---|
| focus | Moves focus to the input control which failed validation. |
| message | Indicates that the validation message should be displayed in the browser message dialog. |
| none | No indication of failed validation. |
| inherit | The value of the property should be inherited from the parent element. |
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
<head>
<title>Effect properties</title>
<style type="text/css">
widget|carousel {
height: 6em;
padding: 4px;
mcs-transition-interval: 3s;
mcs-effect-style: wipe-top;
mcs-effect-duration: 2s;
}
widget|carousel:mcs-concealed {
mcs-effect-style: wipe-top;
mcs-effect-duration: 2s;
}
widget|ticker-tape {
mcs-marquee-direction: right;
mcs-marquee-style: scroll;
mcs-marquee-repetition: 3;
mcs-marquee-speed: 10em;
}
</style>
</head>
<body>
<widget:carousel>
<li><a href="http://www.ankara-bel.gov.tr">Ankara</a></li>
<li><a href="http://www.berlin.de">Berlin</a></li>
<li><a href="http://www.budapest.hu">Budapest</a></li>
<li><a href="http://www.krakow.pl">Cracow</a></li>
<li><a href="http://www.ljubljana.si">Ljubljana</a></li>
<li><a href="http://www.prague-city.cz">Prague</a></li>
<li><a href="http://www.rcc.lv">Riga</a></li>
<li><a href="http://www.tallinn.ee">Tallinn</a></li>
<li><a href="http://www.wien.gv.at/">Vienna</a></li>
<li><a href="http://www.vilnius.lt">Vilnius</a></li>
<li><a href="http://www.zagreb.hr">Zagreb</a></li>
</widget:carousel>
<widget:ticker-tape>
<span>The Ticker Widget is a sideways-scrolling display area. </span>
<span>Its purpose is to display information such as news headlines, stock prices, weather
conditions etc</span>
</widget:ticker-tape>
</body>
</html>