FILL Attribute | fill Property

  • Article

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

Sets or gets the action taken by an element if the element timeline ends before the timeline on its parent element ends.

Syntax

HTML <ELEMENT FILL = sAction... >
Scripting [ sAction = ] object.fill [ = sAction ]

Possible Values

sAction String that specifies or receives one of the following values.
freeze
The element remains in its state at the end of its timeline. The effective end of the element is dependent on the parent time container type. In a t:PAR container, the element ends when the t:PAR ends. In a t:SEQ container or a t:EXCL container, the element ends when the next element begins.
hold
The element remains in its state at the end of its timeline until the end of the parent time container, regardless of the parent time container type.
remove
The element does not extend past the end of its timeline.
transition
Microsoft Internet Explorer 6 and later. The element remains in its state at the end of its timeline. The effective end of the element is dependent on the subsequent transition of an overlapping element. The element ends when the transition of the overlapping element ends. An element with a value of transition works appropriately only when the following conditions are met.
  • The element is in a t:SEQ element or a t:PAR element.
  • The t:TRANSITIONFILTER is a child of the element to be transitioned.
  • The parent element of the t:TRANSITIONFILTER must have a TIMECONTAINER attribute value of par.
  • t:AUTOREVERSE is not used on the t:TRANSITIONFILTER element.
  • The elements overlap in layout. Currently, a value of transition can have an effect, even if the elements don't overlap. However, this should not be done because later versions of Internet Explorer might not support this behavior.

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

Remarks

If an element is a time container, for example, t:SEQ, then the default value is remove.

If an element is not a time container, and the element specifies DUR, END, REPEATDUR, or REPEATCOUNT, then the default value is remove.

If an element is not a time container and it does not specify any of the preceding four attributes, then the default value is freeze.

This property supersedes the endHold property.

In Internet Explorer 6, the fill property supports transition as a possible value.

Examples

This example uses the fill attribute to set the action taken by the element when its timeline ends before the timeline of its parent element ends.

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>fill Property</TITLE>
<?IMPORT namespace="t" implementation="#default#time2">

<STYLE>
    .time{ behavior: url(#default#time2);}
</STYLE>
</HEAD>

<BODY>

<t:excl id="t1" begin="0" DUR="15">
    <DIV ID="div1" class="time" BEGIN="0" DUR="10" fill="freeze">
        This text has a duration of 10 seconds, but the time container has a
        duration of 15 seconds. This text will be displayed beyond its timeline
        until the timeline of its parent element ends.
    </DIV>
</t:excl>

</BODY>
</HTML>

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

The following example demonstrates setting the FILL attribute to transition. Because the FILL attribute is set to transition on the first image and the second image, the first image is visible while the second image transitions in, and the second image is visible as the third image transitions in.

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

<DIV STYLE="height:100px">
<t:SEQ REPEATCOUNT="indefinite" >

<t:MEDIA STYLE="position:absolute;" src = "onepic.jpg" DUR="3" 
TIMECONTAINER="par" FILL="transition" >
<t:TRANSITIONFILTER TYPE="fade" DUR="2"/>
</t:MEDIA>

<t:MEDIA  STYLE="position:absolute;" SRC = "twopic.jpg" DUR="3" 
TIMECONTAINER="par" FILL="transition"  >
<t:TRANSITIONFILTER TYPE="ClockWipe" DUR="2"/>
</t:MEDIA>

<t:MEDIA  STYLE="position:absolute;" SRC = "threepic.jpg" DUR="3" 
TIMECONTAINER="par" >
<t:TRANSITIONFILTER TYPE="barnDoorWipe" DUR="2"/>
</t:MEDIA>

</t:SEQ>
</DIV>

</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/fillEX1.html

Applies To

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

See Also

Introduction to HTML+TIME