fill property

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

Syntax

JScript
f = object.fill

Property values

Type: String

One of the values in the Property Values section.

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.

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

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

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.

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

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

See also

animate

animateColor

animateMotion

animation

audio

img

media

par

ref

seq

set

time2

video

Introduction to HTML+TIME