END Attribute | end Property (A, ACRONYM, ADDRESS, ...)

HTML (DHTML)

previous page next page

END Attribute | end Property

Sets or retrieves a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat.

What's New for Microsoft?Internet Explorer 6

The end property applies to the transitionFilter.

Syntax

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

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

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's timeline starting at zero seconds. By contrast, the DUR attribute represents a value relative to the value of the element's BEGIN attribute. 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 using an element associated with the time behavior, rather than the time2 behavior, you must prefix the attribute with the t: namespace. The time behavior only supports the clock-value format and the value indefinite.

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>

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.

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>

This feature requires Microsoft?Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example uses the END attribute to alter 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>

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example shows how to use multiple values for the END attribute to specify that a time element can end on the time line 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>

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 .

Applies To

A, ACRONYM, ADDRESS, t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, t:ANIMATION, AREA, t:AUDIO, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, hn, HR, I, IFRAME, IMG, t:IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LEGEND, LI, LISTING, MARQUEE, t:MEDIA, MENU, OL, OPTION, P, PLAINTEXT, playItem, PRE, Q, t:REF, S, SAMP, t:SEQ, t:SET, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, time2, TR, TT, U, UL, VAR, t:VIDEO, XMP, t:TRANSITIONFILTER