END Attribute | end Property

  • Article

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

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

HTML <ELEMENT END = sTime... >
Scripting [ sTime = ] object.end

Possible Values

sTime String that specifies or receives one of the following values.
clock-value
Clock value, such as h:min:s.f, described in Time Formats.
id.begin[+/-clock-value]
Element end time defined relative to the begin time of another element. For example, to make the element end 10 seconds after element x begins, specify end="x.begin+10s". The clock-value is optional.
id.end[+/-clock-value]
Element end time defined relative to the end time of another element. For example, to make the element end 25 seconds before element x ends, specify end="x.end-25s". The clock-value is optional.
indefinite
Element remains active on the timeline for an indefinite amount of time.

The property is read/write. The property has no default value.

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.

<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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/end.htm

This example uses the END attribute to make a paragraph disappear when the user clicks the button.

<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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/end2.htm

This example uses the END attribute to modify the effect of a transition.

            
<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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/endEX1.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.


<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>

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

Applies To

t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, t:ANIMATION, t:AUDIO, t:IMG, t:MEDIA, t:REF, t:SEQ, t:SET, time2, t:VIDEO, t:TRANSITIONFILTER

See Also

Introduction to HTML+TIME, endElement, endElementAt