spacer
Yehuda Shiran October 13, 2000
Deriving HTML+TIME's Active Duration
Tips: October 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

The HTML+TIME capability in IE 5.5 and up is based on the timeline principle. Some applications require that you know the total duration. You do it by using the currTimeState object, which is a property of any container that participates in the HTML+TIME behavior. One of currTimeState's many properties and methods is the activeDur property. The activeDur property reports the total length of the timeline. This property includes the repeatDur time, and the effect of the autoReverse property, if applicable. For example, a timeline with a duration of five seconds, a repeatCount of 3, and autoReverse set to true would yield an activeDur of 30 seconds (2*(5*3)). A timeline with a repeatCount of indefinite would yield an Infinity activeDur. The following example (based on a Microsoft script) demonstrates the usage of activeDur. When you click the button, we print the active duration, which is infinite in this example. Here is the function that prints the active duration of the timeline:

function printDuration() {
  var now = parallel.currTimeState.activeDur;
  alert(now.toFixed(2));
}

And here is the Demo:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Here is the HTML code:

<INPUT TYPE="button" value="Show Active Duration" onclick="printDuration()">
<t:PAR CLASS="time" ID="parallel" REPEATCOUNT="indefinite">
    <H1 ID="hdg1" CLASS="time" STYLE="color:red;" 
	TIMEACTION="style" BEGIN="0" DUR="3">Heading 1</H1>
    <H2 ID="hdg2" CLASS="time" STYLE="color:red;" 
	TIMEACTION="style" BEGIN="0" DUR="3">Heading 2</H2>
    <H3 ID="hdg3" CLASS="time" STYLE="color:blue;" 
	TIMEACTION="style" BEGIN="3" DUR="3">Heading 3</H3>
    <H4 ID="hdg4" CLASS="time" STYLE="color:blue;" 
	TIMEACTION="style" BEGIN="3" DUR="3">Heading 4</H4>
    <H5 ID="hdg5" CLASS="time" STYLE="color:green;" 
	TIMEACTION="style" BEGIN="6" DUR="3">Heading 5</H5>
    <H6 ID="hdg6" CLASS="time" STYLE="color:green;" 
	TIMEACTION="style" BEGIN="6" DUR="3">Heading 6</H6>
</t:PAR>

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


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business