JavaScript Kit > IE Filters reference > Here

IE Filters checklist

When implementing IE's multimedia filters (which include transitions) on your page, take a note of the below:

Layout requirement:

IE Filters (or Filters in general), the element in question must contain a layout in order for the effect to be applied. For elements such as DIVs or SPANs, they must have a "width", "height", or "position: absolute" attribute declared. All of the below examples create a valid Filter layout:

<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);">Some DIV</div>

<div style="width: 100px; height: 100px; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);">Some DIV</div>

<span style="position: absolute; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);">Some span</span>

<img style="filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);" />

Note that image elements already have a layout built in, and do not require an explicit layout declaration (ie: "width" and "height" attributes, though it would be nice regardless!). requirement

Adding more than one filter to an element

There is no rule saying you cannot define multiple filters inside an element. In such cases, the filters are applied in the order they are defined. Just separate each filter with a space, whether in your global or inline CSS. I've added line breaks too in the below just for easier viewing:

<div style="width: 200px; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=50)
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)
progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true);>
Some div
</div>

Two ways to access a filter (inside your script)

Once you've defined a filter, typically inside your CSS, you can access the filter and manipulate it via scripting. In general there are two ways to do this:

1. Directly, using the filter's name.
2. Numerically, via the filters object.

For example:

<div id="demo" style="width: 200px; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=50)
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)
progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true);>
Some div
</div>

<script type="text/javascript">
var demo=document.getElementById("demo")

demo.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=20 //1) access filter by name
demo.filters[0].Opacity=20 //2) access filter by position within defined filters (in this case, 1st filter)

</script>

See this page for more info on the Filters object.

Browser support and detection

Modern day Filters work in IE5.5+ Windows only, so when scripting a filter, you need to detect for browser support. There are many ways to do this, one of them being checking if the browser supports the filters object:

if (el.filters && el.filters.length>0)
//Manipulate filter

For example:

<div id="mydiv" style="width: 150px; height: 150px; background-color: green; filter: progid:DXImageTransform.Microsoft.RadialWipe(duration=3)
">
Some text
</div>

<script type="text/javascript">

var mydiv=document.getElementById("mydiv")
var filterscheck=mydiv.filters && mydiv.filters.length>0 //check if element supports filter/ has at least 1 filter defined

if (filterscheck) //if browser supports filters
mydiv.filters[0].apply() //capture initial state of content
mydiv.style.backgroundColor="blue" //change content background to blue (not visible yet)
if (filterscheck) //if browser supports filters
mydiv.filters[0].play() //play transition to reveal new background

</script>