JavaScript Kit > IE Filters reference > Here

Wave Filter

The Wave Filter performs a sine wave distortion on the content along the vertical axis. Defined via IE's CSS filter property, here is its basic syntax:

Syntax:

filter: progid:DXImageTransform.Microsoft.Wave(attribute1=value1, attribute2=value2, etc);

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.Wave(attribute1=value1, attribute2=value2, etc)";

Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.

Example:

<style type="text/css">

#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5)";
filter: progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5);
}

</style>


<div id="somediv">Some DIV</div>

Syntax via scripting:

//To define a new MotionBlur filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.Wave(attribute=value1, attribute2=value2)"

To access an existing property within the Wave filter:
object.filters.item("DXImageTransform.Microsoft.Wave").Property1=value1;

//To access an existing property within the Wave filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element

When getting or setting a specific filter's attribute via scripting, you capitalize the attribute to turn it into a property.

Below lists the attributes/properties of the Wave filter:

Wave Filter attributes (properties)

Attributes/ Properties	Description
add	Boolean value that specifies whether the filter image overlays the original image. Default is false. Read/ write. Valid values: true/ false
enabled	Sets/ returns whether the filter is enabled or not. Default is false. Valid values: true/ false
freq	Sets the number of waves added to the content. Default value is 3. Valid values: Integer greater than 0. Example: <style type="text/css"> #somediv{ -ms-filter: "progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5)"; filter: progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5); width: 100px; height: 100px; background: red; } </style> <div id="somediv">Some DIV</div> Demo (requires IE5.5+): Some DIV
lightStrength	Sets the difference in light intensity between the peaks and troughs of the filter's waves. Default is 100. Valid values: 0 - 100 (higher equals greater intensity).
phase	Sets the position in which the Sine wave starts as a percentage of one wave cycle. Default is 0. Valid values: 0 - 100 (percentage implied).
strength	Sets the strength, or distance (in pixels) in which the wave extends. Default is 1. Valid values: Integer greater than 0.