November 8, 2000 - Parent-Last-Child Synchronization | WebReference

November 8, 2000 - Parent-Last-Child Synchronization

Yehuda Shiran November 8, 2000
Parent-Last-Child Synchronization
Tips: November 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The HTML+TIME capability in IE 5.5 and up allows you to end a parent's time line when a specific element becomes inactive. You specify it by:

object.endSync = childID;

In the following HTML+TIME object, the last child to become inactive is hdg6 (last tag). It ends after 25 seconds. The parent element will end at the same time, if you click the button below before then:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


This option is equivalent to endSync='all', and is also the default. Here is the definition of the HTML+TIME object above:

<HTML>
<HEAD>
<TITLE>Style Action</TITLE>
<STYLE>
    .time {behavior:url(#default#time2);}
</STYLE>
<XML:NAMESPACE PREFIX="t"/>
</HEAD>
<BODY>
<t:PAR CLASS="time" REPEATCOUNT="1" ID="parallel">
    <H1 ID="hdg1" CLASS="time" STYLE="color:red;" 
	TIMEACTION="style" BEGIN="0" DUR="5">Heading 1</H1>
    <H2 ID="hdg2" CLASS="time" STYLE="color:red;" 
	TIMEACTION="style" BEGIN="0" DUR="10">Heading 2</H2>
    <H3 ID="hdg3" CLASS="time" STYLE="color:blue;" 
	TIMEACTION="style" BEGIN="0" DUR="15">Heading 3</H3>
    <H4 ID="hdg4" CLASS="time" STYLE="color:blue;" 
	TIMEACTION="style" BEGIN="0" DUR="20">Heading 4</H4>
    <H5 ID="hdg5" CLASS="time" STYLE="color:green;" 
	TIMEACTION="style" BEGIN="0" DUR="25">Heading 5</H5>
    <H6 ID="hdg6" CLASS="time" STYLE="color:green;" 
	TIMEACTION="style" BEGIN="0" DUR="8">Heading 6</H6>
</t:PAR>
</BODY>
</HTML>

And here is the definition of the button:

<FORM>
<INPUT TYPE="button" VALUE="End when Last is Done" onclick="parallel.endSync='last'">
</FORM>

Learn more about HTML+TIME in Column 67, Introduction to HTML+TIME.