Categories:

JavaScript Kit > IE Filters reference > Here

IE Filters checklist

Last updated: October 28th, 2008

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

Difference in syntax between pre IE8 and IE8+ browsers

The syntax across the board for IE filters is different between pre IE8 browsers (ie: IE5, IE6, and IE7) and IE8+. Starting in IE8, you must now prefix the original syntax with a "-ms-" declaration, plus surround the entire filter value with quotes, to make the syntax CSS2.1 compliant. Without doing so, any filters will be ignored in IE8:

Pre IE8 syntax:

<style type="text/css">

#myimage{
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
}

</style>


<img id="myimage" />

IE8+ syntax:

<style type="text/css">

#myimage{
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";
}

</style>


<img id="myimage" />

To define a filter that works in all browsers of IE, including IE8+, you must declare both syntaxes simultanously within the element in question:

<style type="text/css">

#myimage{
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
}

</style>


<img id="myimage" />

Stupid yes, but that's what happens when you're Microsoft and create a standards compliant mess with IE- leave it to webmasters to clean it up!

Adding more than one filter to an element

There is no rule saying you cannot define multiple filters simultaneously inside an element. In such cases, the filters are applied in the order they are defined. Just separate each filter with a space in your global CSS:

<style type="text/css">

#mydiv{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelRadius=3) progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true)";

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)  progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true);">
}

</style>

<body>
<div id="mydiv" style="width: 200px;">
Some DIV
</div>

When multiple filters are defined on an object, each filter is processed in source order (except procedural surfaces, which are always computed first). To emphasize a filter's effect, you should place it last in source order or on the object's parent instead. Always place transitions last in source order.

Layout requirement:

For IE Filters, the element in question must contain a layout in all versions of IE up to IE7 order for the effect to be applied. In IE8+ the "hasLayout" requirement has been dropped. 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%;">Some DIV</div>

<div style="width:100px; height:100px;">Some DIV</div>

<span style="position:absolute;">Some span</span>

<img src="test.gif" />

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!). Also, as mentioned, IE8 no longer requires a layout in order to apply a filter to an element.

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:

<style type="text/css">

#demo{
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)  progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true)";

filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelRadius=3) progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true);
}

</style>


<div id="demo" style="width: 200px;">
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:

<style type="text/css">

#mydiv{
-ms-filter: "progid:DXImageTransform.Microsoft.RadialWipe(duration=3)";
filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=3);
}

</style>


<div id="mydiv" style="width: 150px; height: 150px; background-color: green;">
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>


Reference List

[an error occurred while processing this directive]

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.