end property
Sets or gets a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat.
Syntax
| JScript |
|---|
|
Property values
Type: String
one of the following values.
Remarks
The END attribute represents an absolute value along the parent element timeline, starting at zero seconds. In contrast, the DUR attribute represents a value relative to the value of the BEGIN attribute on the element. Do not use the END attribute on the same element as the DUR attribute.
The END attribute can be assigned many END time values. For example, to make the element end 12 seconds after element x receives focus, specify END="x.onfocus+12s". To make the element end 10 seconds before element x begins, specify END="x.end-10s". If you want an element to end four seconds after the page loads, or to end one second after the user clicks an object on the page, use the following syntax: END="4; oObject.click+1".
When you use an element associated with the time behavior, instead of the time2 behavior, you must prefix the attribute with the t: namespace. The time behavior only supports the clock-value format and the indefinite value.
In Microsoft Internet Explorer 6, The end property applies to the transitionFilter.
Examples
This example uses the END attribute to display three lines of text, each with its own start time, but all with the same end time.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/end.htm
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time{ behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY BGCOLOR="white">
<SPAN CLASS=time STYLE="COLOR:Red;" BEGIN="0" END="10"
TIMEACTION="visibility">
<H3>Paragraph 1</H3>
<P>This is paragraph number one. It is displayed as soon as
the page is loaded.</P>
</SPAN>
<SPAN CLASS=time STYLE="COLOR:Blue;" BEGIN="3" END="10"
TIMEACTION="visibility">
<H3>Paragraph 2</H3>
<P>This is paragraph number two. It is displayed three seconds
after the page is loaded.</P>
</SPAN>
<SPAN CLASS=time STYLE="COLOR:Green;" BEGIN="6" END="10"
TIMEACTION="visibility">
<H3>Paragraph 3</H3>
<P>This is paragraph number three. It is displayed six seconds
after the page is loaded.</P>
</SPAN>
</BODY>
</HTML>
This example uses the END attribute to make a paragraph disappear when the user clicks the button.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/end2.htm
<HTML>
<HEAD>
<STYLE>
.time2 {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<BUTTON ID="button1">Hide Paragraph</BUTTON><BR><BR>
<SPAN ID="span1" CLASS="time2" STYLE="COLOR:Red;"
END="button1.click" TIMEACTION="display">
<H3>Paragraph 1</H3>
<P>This is paragraph number one. It disappears when the button
is clicked.</P>
</SPAN>
</BODY>
</HTML>
This example uses the END attribute to modify the effect of a transition.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/endEX1.html
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<t:TRANSITIONFILTER TYPE="fade" DUR="8" END="4" TARGETELEMENT="firstDiv"/>
<DIV CLASS="time" ID="firstDiv" DUR="indefinite"
STYLE="position:relative; left:20px; width:420px; height:100px;
background-image:url(ART_time_progress.gif); background-repeat: no-repeat;">
</DIV>
</BODY>
</HTML>
This example shows how to use multiple values for the END attribute to specify that a time element can end on the timeline for several different reasons.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/endMultiple.htm
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
#oDiv
{
border:2px solid black;
font:12pt arial;
padding:20;
color:#000000;
background-color:#FFCC00;
width:270px;
height:270px;
}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY ID="oBody">
<BUTTON ID="oButton">Click</BUTTON>
<t:PAR ID="oPar" BEGIN="oButton.click">
<!-- This DIV ends on the time line either after 8 seconds, one second after the body
of the document is clicked, or one second after the mouse cursor leaves the DIV. -->
<DIV ID="oDiv" BEGIN="1" CLASS="time" END="8;oBody.click+1;oPar.mouseleave+1">
<!-- These TRANSITIONFILTER elements are just here to create the visible transitions -->
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="1" MODE="in" TYPE="fade"/>
<t:TRANSITIONFILTER BEGIN="oDiv.End-1;" DUR="1" MODE="out" TYPE="pushWipe"/>
This is the contents of the DIV
</DIV>
</t:PAR>
</BODY>
</HTML>
See also
Reference
Conceptual