Using the TIMEACTION Attribute

  • Article

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

HTML+TIME (Timed Interactive Multimedia Extensions) 2.0 provides authors with the ability to specify what action takes place on a time element when it is active. The timeAction property allows you to specify how other elements on the page flow around time elements when they are not visible (inactive) or what type of Cascading Style Sheets (CSS) styles is applied to active time elements. Click the Show Me button to see a demonstration of the effects on time elements when different values of the timeAction property are specified.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/timeAction/intro_timeAction.htm

This overview discusses in detail how to use the timeAction property and the purposes of this property.

This article contains the following topics:

  • Prerequisites 
  • Values Available to the TIMEACTION Attribute 
  • Appearing and Disappearing Time Elements 
  • Adding CSS Properties 
    • Class 
    • Style 
    • Combining Effects of the timeAction Property 
  • Related Topics

Prerequisites

This article assumes you know how to use Introduction to DHTML Behaviors, specifically, the time2 behavior of HTML+TIME. This article does not go into great detail on how to add a behavior to your page nor does it cover how to declare a namespace and use custom tags as required by the time2 behavior. These topics are covered in the HTML+TIME Overview and Spice Up Your Web Pages with HTML+TIME. You should be familiar with CSS.

Values Available to the TIMEACTION Attribute

You can assign one of four possible values to the timeAction property. These values and their effects on time elements are summarized as follows.

<ELEMENT TIMEACTION = "value".../>
Attribute Value Value Description
class:classname1 [classname2 ...] The specified classname is applied to the element while it is active on the time line and removed while the element is inactive.
display Element displays when the time line is active and disappears when the time line is inactive. As the element changes between active and inactive states, the surrounding HTML elements dynamically reflow within the page.
style Element displays with the inline style when the time line is active and displays without the inline style when the time line is inactive.
visibility Element's visibility property displays the element when the time line is active and makes the element disappear when the time line is inactive. The surrounding HTML elements do not reflow as a result of the local element changing between active and inactive states.
These values and possible uses for them are discussed in the sections ahead.

Appearing and Disappearing Time Elements

The timeAction values of display and visibility are similar to each other in that they both specify that the time element is visible when it is active and disappears when it is inactive. However, the two differ on how other elements in the document behave as the time element appears and disappears.

For elements set to display, the other elements on the page dynamically reflow when the time element disappears. Essentially, the other elements behave as though the time element has been completely removed from the document when it is inactive. The following example demonstrates this.


<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" 
implementation = "#default#time2" />
<STYLE>
    .time {behavior: url(#default#time2);}
</STYLE>
</HEAD>

<BODY>

<BUTTON ID="oButton">Start Time Element</BUTTON>
<BR>

<DIV ID="oDisplayDIV" CLASS="time" BEGIN="oButton.click" DUR="1" 
TIMEACTION="display" 
STYLE="font-family:arial;font-size:42pt;background-color:#FFCC00;
width:300px;padding:10px;text-align:center">
A
</DIV>

</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/timeAction/display_visibilityEX2.htm

When timeAction is set to visibility, other elements on the page do not reflow when the time element appears and disappears. Thus, the time element is still in the layout of the page when it is not active even though it is not visible. The following example demonstrates this point.


...
<BUTTON ID="oButton">Start Time Element</BUTTON>
<BR>

<DIV ID="oDisplayDIV" CLASS="time" BEGIN="oButton.click" DUR="1" 
TIMEACTION="visibility" 
STYLE="font-family:arial;font-size:42pt;background-color:#FFCC00;
width:300px;padding:10px;text-align:center">
A
</DIV>
...

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/timeAction/display_visibilityEX3.htm

The effects of a timeAction value of visibility on time elements is especially important to note because most elements have a default timeAction value of visibility. An exception to this is the t:SEQ element, which has a default value of display. Therefore, it is seldom necessary to include the TIMEACTION attribute in elements when it is desired for the element to behave like an element with the TIMEACTION attribute explicitly set to visibility.

Adding CSS Properties

Using the timeAction property makes it simple to apply different CSS properties to elements when they are active and remove the CSS properties when the time element is inactive. This can be done in one of two ways.

  1. Set timeAction to a value of class: followed by the name of the CSS class that you want to apply to the active time element.
  2. Set timeAction to a value of style, which will apply whatever CSS properties are specified in the STYLE attribute of the time element.

All other CSS properties, explicitly set or inherited by the time element, are applied at all times. The following example shows both ways being used to apply the same CSS properties to two DIVs.


<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>TIMEACTION Sample</TITLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" 
implementation = "#default#time2" />
<STYLE>
    .time {behavior: url(#default#time2);}
    <!-- This class is applied to the second time element below when 
    the time element is active. -->
    .cssClass
    {
    font-family: arial; 
    font-size: 14pt; 
    color:#ffffff; 
    background-color: #003399;
    height:100px;
    width:300px;
    padding:10px
    }
</STYLE>
<LINK REL="stylesheet" HREF="/workshop/samples/samples.css" TYPE="text/css">
</HEAD>

<BODY>

<BUTTON ID="oButton">Start Time Element</BUTTON>
<BR><BR>
<!-- When active, this DIV applies the style properties specified in its
STYLE attribute. -->
<DIV CLASS="time" BEGIN="oButton.click" DUR="1" TIMEACTION="style" 
STYLE="font-family: arial; font-size: 14pt; color:#ffffff; 
background-color: #003399;height:100px;width:300px;padding:10px">
<b>TIMEACTION = "STYLE"</b>
</DIV>
<P>
<!-- When active, this DIV applies the "cssClass" class. -->
<DIV CLASS="time" BEGIN="oButton.click" DUR="1" TIMEACTION="class:cssClass">
<b>TIMEACTION = "CLASS:<I>className</I>"</b><BR>
</DIV>

</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/timeAction/cssEX1.htm

The technique you use to change the CSS style properties on a time element is a matter of preference. The next two sections demonstrate the two techniques, using Class and Style values, in more detail.

Class

It is often convenient to bundle CSS style properties into class definitions and then apply them to your elements. The class or classes specified by the timeAction property are added to any CSS classes specified by the CLASS attribute in the time element.

If you specify a class name for the timeAction property that is already present on the element, that class is removed whenever the element is not active on the time line. In the following example, the redText class is applied only while the SPAN is active on the time line; however, the boldFont class is always applied to the SPAN.


<SPAN CLASS="redText boldFont" STYLE="behavior:url(#default#time2)" 
    BEGIN="5" TIMEACTION="class:redText">The text is red 
    only while this element is active on the time line.
</SPAN>

To specify multiple classes for the timeAction property, separate the class names with white space.


<!-- This SPAN has "class1", "class2", and "class3" applied when it is active. -->
<SPAN CLASS="time" BEGIN="5" TIMEACTION="class: class1 class2 class3">
A SPAN
</SPAN>

Style

CSS properties can be applied to time elements during their active period using the timeAction value of style. When this value is specified, any inline CSS properties applied to the time element using the STYLE property are applied during the active period of the element and not applied while the element is not active. The same rules for cascading style sheets apply to style properties applied in this way. For instance, if the same style property is specified in a class and in an inline style, the style property of the inline style will overide the one specified in the class.


...
<STYLE>
    .time {behavior: url(#default#time2);}
    .cssClass
    {
    height:100px;
    width:300px;
    padding:10px;
    background-color:#003399;
    }
</STYLE>

<DIV  CLASS="time cssClass" BEGIN="4" DUR="4" TIMEACTION="style" 
STYLE="background-color:red">
<B>TIMEACTION = "STYLE"</B><BR>
CSS properties specified by the STYLE attribute in this element are applied
while the element is active on the time line and removed while the element is
inactive. 
</DIV>
...

Combining Effects of the timeAction Property

Although it is only possible to have one value for the timeAction property on a given time element, it is easy to create the effect of multiple timeAction values on a time element by making it a child of another time element with a different timeAction value. The following is an example of this.


<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" 
implementation = "#default#time2" />
<STYLE>
    .time {behavior: url(#default#time2);}
    .cssClass
    {
    font-family: arial; 
    font-size: 14pt; 
    color:#ffffff; 
    background-color: #003399;
    height:100px;
    width:300px;
    padding:10px;
    }
</STYLE>
</HEAD>
<BODY>

<t:PAR ID="oParent" CLASS="time" BEGIN = "2" DUR= "6" TIMEACTION = "display">
<DIV  CLASS="time cssClass" BEGIN="2" DUR="3" TIMEACTION="style" 
STYLE="background:#ffcc00; color:black; font-weight:bold; font-size:22pt;">
DIV using TIMEACTION
</DIV>
</t:PAR>

</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/timeAction/combinedEX1.htm