Initiating Timed Elements with the begin Attribute

HTML (DHTML)

previous page next page

Initiating Timed Elements with the begin Attribute

Internet Development Index

Authoring interactive Web pages without using script is now a reality with the HTML+TIME (Timed Interactive Multimedia Extensions)?A HREF="../time2/properties/begin.html">begin attribute. This attribute enables you to animate objects and manipulate graphics on your Web pages and empowers you to set timed events that initiate at a prescribed time. This overview provides you with the necessary syntax for the begin attribute and describes how to initiate timed interactive HTML+TIME elements using the time2 behavior implemented in Microsoft?Internet Explorer 5.5.?/p>

This overview contains the following sections.

Prerequisites

To use this overview most effectively you should have a basic knowledge of the time2 behavior of HTML+TIME and of Introduction to DHTML Behaviors. Specifically, this overview assumes that you know how to create an Extensible Markup Language (XML) namespace and import and reference the time2 behavior. For more information on how to declare an XML namespace and/or import and reference the time2 behavior, see HTML+TIME.

General Information for the begin Attribute

The default value for the begin attribute is 0 and the default metric for the begin attribute is seconds. You can append an h, min, s, or ms abbreviation to the begin value to specify hours, minutes, seconds, or milliseconds respectively. For example, begin="1" is the same as begin="1s"—both have a begin value of one second. Also, an element's begin attribute can include either a positive or negative value as well as fractional values. Below is a list of some possible values to which you can set an element's begin attribute.

ValueDescription
7.5ms7.5 milliseconds
7.57.5 seconds
7.5s7.5 seconds
7.5min7.5 minutes
7.5h7.5 hours
15:07:2515 hours, 7 minutes, 25 seconds
2000-11-15T19:20:30.45+01:00
  • "2000-11-15" - November 15, 2000
  • "T" - Separator between time and date
  • "19:20:30.45" - 7:20pm, and 30.45 seconds
  • "+01:00" - Coordinated universal time (UTC) plus one hour
object1.beginInitiate when object1 initiates.
object1.clickInitiate when object1 is clicked.
indefiniteInitiate when the beginElement method is called.
object.click + 3sInitiate 3 seconds after object1 is clicked.

Note  For objects other than media objects, if the timeline has already started and an element is set to initiate at some negative value, the element initiates immediately. However, if you set a media object to initiate at a negative value, the media object adds the begin attribute's negative value to its own value (resulting in subtraction) and initiates at the new, decreased value. For example, a media object with a mediaDur of 20 seconds and a begin value of object1.click-3s, initiates 17 seconds into the file immediately after object1 is clicked.

Set an Element to Initiate at a Simple Time Value

You can assign a simple time value to the begin attribute to indicate when an element becomes active. For more detailed information on using clock-time values, see Time Formats.

The following example uses the begin attribute set to a simple time value for each animated element. For more information on how to use the animate syntax, see Basics of HTML+TIME Animation.

...
<DIV id="oDIV" class="oElement1"></DIV>
<t:ANIMATE targetElement="oDIV" attributeName="left" to="400" begin="1"
dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite"/>
<DIV id="oDIV2" class="oElement2"></DIV>
<t:ANIMATE targetElement="oDIV2" attributeName="left" to="400" begin="2"
dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite"/>
<DIV id="oDIV3" class="oElement3"></DIV>
<t:ANIMATE targetElement="oDIV3" attributeName="left" to="400" begin="3.5"
dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite"/>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate at a Wall Clock Value

You can also assign an element's begin attribute to a wall clock value. The wall clock value describes the element's begin time as real-world clock time. The World Wide Web Consortium (W3C) describes three ways of handling time zone offsets.

  1. With a special UTC designator ("Z"), times are expressed in UTC.
  2. Times are expressed in local time, together with a time zone offset in hours and minutes. A time zone offset of "+hh:mm" indicates that the date/time uses a local time zone which is "hh" hours and "mm" minutes ahead of UTC. A time zone offset of "-hh:mm" indicates that the date/time uses a local time zone which is "hh" hours and "mm" minutes behind UTC.
  3. Times are expressed in local time, as defined by your system settings. The local time zone of the end-user platform is used.

The following list shows various ways to specify an element to begin on April 1, 2001 UTC.

  • begin="wallclock( 2001-04-01Z )"
  • begin="wallclock( 2001-04-01T00:00Z )"
  • begin="wallclock( 2001-04-01T00:00:00Z )"
  • begin="wallclock( 2001-04-01T00:00:00.0Z )"
  • begin="wallclock( 2001-04-01T00:00:00.0-00:00 )"

In the following example, enter a begin time in the input boxes that is greater than the current time shown and click the 'Set begin time' button. Once set, a message, "Breaking News: This is some breaking news..." appears at the time you have specified and displays until you click within the object. By default, the message is set to initiate on April 1, 2005. 

...
<DIV id="oAlert" class="oElement1" begin="wallclock(2005-04-01Z)"
end="60s; oAlert.click">
<DIV class="oAlertHead"
style="color:black; font-weight:bold; text-align:center;">
BREAKING NEWS!!!
</DIV>
<B><U>Breaking News:</U></B> This is some breaking news. This is some breaking news.
This is some breaking news. This is some breaking news. This is some breaking news.
This is some breaking news. This is some breaking news. This is some breaking news.
This is some breaking news. This is some breaking news. This is some breaking news.
<BR><BR>
Click anywhere within this news alert to close the pop-up window.
<DIV class="oAlertHead">**Note: This is not an actual news bulletin. It is for demonstration
purposes only.</DIV>
</DIV>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate Relative to another Timed Element

You can make elements initiate relative to other timed elements in the document. Elements can be assigned to initiate when another element has started or stopped.

Set an Element to Initiate Relative to another Timed Element's begin Value

In the following example, the first paragraph with id paragraph1 has a begin time of 5 seconds and the second paragraph with id paragraph2 has a begin time of paragraph1.begin. The first paragraph appears 5 seconds after the page loads. The second paragraph appears when the first paragraph initiates. These settings cause both paragraphs to have a begin time value of 5 seconds.

...
<P id="paragraph1" class="time" style="color:red;font-size:20pt;" begin="5">
This is the first paragraph. It initiates at 5 seconds and is displayed
indefinitely.
</P>
<P id="paragraph2" class="time" style="color:green;font-size:20pt;"
begin="paragraph1.begin">
This is the second paragraph. It initiates the same time at which the first paragraph
initiates (at 5 seconds) and is displayed indefinitely.
</P>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate Relative to another Timed Element's end Value

You can assign elements to initiate after another element completes its simple duration. By using the preceding example and adding a simple duration attribute value (dur), which specifies the amount of time the element remains active in relation to the first paragraph, you can set the second paragraph to appear when the first paragraph disappears.

In the following example, the first paragraph has a begin time of 5 seconds (after the page loads) with a duration of 5 seconds. The second paragraph initiates as soon as the first paragraph has completed its simple duration. The second paragraph does not have a set duration and displays indefinitely.

...
<P id="paragraph1" class="time" style="color:red;font-size:20pt;" begin="5"
dur="5">
This is the first paragraph. It initiates at 5 seconds and has a duration
of 5 seconds.
</P>
<P id="paragraph2" class="time" style="color:green;font-size:20pt;"
begin="paragraph1.end">
This is the second paragraph. It initiates when the first paragraph stops
(10 seconds) and is displayed indefinitely.
</P>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

You can stop a timed interactive element using the end attribute the same way you start a timed interactive element using the begin attribute. To do this, specify an element's end time using the end attribute. Unlike the dur attribute, the end attribute specifies the absolute end time of an element in relation to the active time of the document.

The duration of timed elements depends on which attribute is satisfied first on the timeline. For example, assuming that 15 seconds has not lapsed since the page loaded, a timed element with a duration of 10 seconds and an end value of 15 seconds stops after 10 seconds. However, if the values were reversed and the timed element had a duration of 15 seconds and an end value of 10 seconds, the timed element still stops at 10 seconds because the end attribute (with a value of 10 seconds) is satisfied first on the timeline.

In the following example, the first paragraph has a begin time of 5 seconds after the page loads and an end time of 10 seconds; therefore, it ends at 10 seconds after pageload. The second paragraph initiates as soon as the first paragraph completes its simple duration. The second paragraph does not have a set duration and displays indefinitely.

...
<P id="paragraph1" class="time" style="color:red;font-size:20pt;" begin="5"
end="10">
This is the first paragraph. It initiates at 5 seconds and ends at 10
seconds.
</P>
<P id="paragraph2" class="time" style="color:green;font-size:20pt;"
begin="paragraph1.end">
This is the second paragraph. It initiates when the first paragraph ends
(10 seconds) and is displayed indefinitely.
</P>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate Relative to the Firing of an Event

Timed elements can initiate upon the firing of any events. You can have an element initiate upon a user-fired event or upon an event fired by an element within the document.

Set an Element to be Initiated by a User-Interaction Event

This example demonstrates how to make timed elements that start or stop in response to user-interaction events. 

...
<t:ANIMATE id="oTA1" targetElement="oDIV" attributeName="left" to="400"
begin="oDIV2.click" end="oDIV3.click" dur="3" accelerate="1"
autoReverse="true" fill="hold"/>
<SPAN class="caption" style="left:150px;">To begin</SPAN>
<DIV id="oDIV2" class="header" style="left:25px;">Click anywhere within
this box to make the yellow DIV start its duration. The timeline
restarts if the yellow DIV is already active when you click here.
</DIV>
<SPAN class="caption" style="left:488px;">To end</SPAN>
<DIV id="oDIV3" class="header" style="left:338px;">If the element is active,
click anywhere within this box to end the element's timeline.
</DIV>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate at the Firing of another Element's Event

You can set timed elements to initiate when another element within the document fires an event. There is a wide variety of events that an element can fire. For more information on the possible events associated with elements, see HTML+TIME 2.0 Reference and DHTML Events.

For example, you can set a timed element associated with a media object to display on your Web page if the media object loads successfully and set an error message to display if the media object fails to load. To do this, assign an element's begin attribute to media_id.onmediacomplete and another element's begin attribute to media_id.onmediaerror. Whether or not the media loads successfully, a message appears for the user. This example demonstrates how to assign an element's begin value relative to the firing of an event within the document. 

...
<!--
This sequence begins if the media object (m1) loads successfully.
-->
<t:seq id="parent" begin="m1.onmediacomplete" dur="21"
style="position:absolute;top:225px;left:305px;">
<SPAN class="time" dur="1">10...</SPAN>
<SPAN class="time" dur="2">For go... for main engine start...</SPAN>
<SPAN class="time" dur="1">7...</SPAN>
<SPAN class="time" dur="2.2">6...</SPAN>
<SPAN class="time" dur=".75">Start...</SPAN>
<SPAN class="time" dur="1.1">3...</SPAN>
<SPAN class="time" dur="1.1">2...</SPAN>
<SPAN class="time" dur="1.1">1...</SPAN>
<SPAN class="time" dur="1.1">0...</SPAN>
<SPAN class="time" dur="1.5">... and lift off...</SPAN>
<SPAN class="time" dur=".85">... lift off...</SPAN>
<SPAN class="time" dur="4.2">Americans return to space as Discovery
clears the tower...
</SPAN>
<SPAN class="time">Roger all Discovery.</SPAN>
</t:seq>
<!--
This sequence begins if the media object (m1) does not load
successfully.
-->
<t:seq id="parent" begin="m1.onmediaerror" dur="indefinite"
style="position:absolute;top:225px;left:305px;">
<SPAN class="time" dur="3">ERROR!</SPAN>
<SPAN class="time" dur="5">No file at the assigned location
(/...some_other_URL.../)...
</SPAN>
<SPAN class="time">Please check back soon!</SPAN>
</t:seq>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate using the beginElement Method Call

You can also assign timed elements to initiate using the beginElement method. To do this, call the beginElement method from an event handler function fired by an element or by user interaction on the Web page.

In this example, the sequential time container initiates at 0 seconds after the page loads. The beginElement method is invoked when the Restart Timeline button is pressed. 

...
<t:seq ID="sequence">
<SPAN class="time" style="color:red; font-size:20pt;"
timeaction="display" dur="1">5...</SPAN>
<SPAN class="time" style="color:green; font-size:20pt;"
timeaction="display" dur="1">4...</SPAN>
<SPAN class="time" style="color:blue; font-size:20pt;"
timeaction="display" dur="1">3...</SPAN>
<SPAN class="time" style="color:orange; font-size:20pt;"
timeaction="display" dur="1">2...</SPAN>
<SPAN class="time" style="color:purple; font-size:20pt;"
timeaction="display" dur="1">1...</SPAN>
<BR>
<IMG class="time" dur="indefinite" src="../common/sun.gif"/>
</t:seq>
<BR>
<BUTTON ID="btn" onclick="sequence.beginElement();">Restart Timeline</BUTTON>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Set an Element to Initiate at an Offset Value

Using an offset value with the begin attribute causes the timed element(s) to start at the specified begin value plus the offset time value. The following example demonstrates how you can create elements to initiate as an offset relative to the begin time of another element. 

...
<DIV id="oDIV" class="oElement1"></DIV>
<t:ANIMATE targetElement="oDIV" attributeName="left" to="400" begin="0"
dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite"/>
<DIV id="oDIV2" class="oElement2"></DIV>
<t:ANIMATE targetElement="oDIV2" attributeName="left" to="400"
begin="oDIV.begin+1;" dur="3" accelerate="1"
autoReverse="true" repeatCount="indefinite" />
<DIV id="oDIV3" class="oElement3"></DIV>
<t:ANIMATE targetElement="oDIV3" attributeName="left" to="400"
begin="oDIV.begin+2;" dur="3" accelerate="1"
autoReverse="true" repeatCount="indefinite"/>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Specifying Multiple begin Values

You can specify multiple values in the begin attribute of any timed element. Using the example above, you can declare an element's begin attribute with semicolon-separated values. In this example, each div's begin time consists of more than one value. 

...
<DIV id="oDIV1" class="oElement1"></DIV>
<t:ANIMATE targetElement="oDIV1" attributeName="left" to="400"
begin="0; restartBtn.click+2" dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite"/>
<DIV id="oDIV2" class="oElement2"></DIV>
<t:ANIMATE targetElement="oDIV2" attributeName="left" to="400"
begin="oDIV1.begin+1; restartBtn.click+1" dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite" />
<DIV id="oDIV3" class="oElement3"></DIV>
<t:ANIMATE targetElement="oDIV3" attributeName="left" to="400"
begin="oDIV1.begin+2; restartBtn.click" dur="3" accelerate="1" autoReverse="true"
repeatCount="indefinite"/>
...
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Related Topics

previous page start next page