DHTML Filter

Session 14

Objectives Filter. Transition. TextRange Object.

Filters A filter allows to define and apply visual effects to

HTML web pages. Can easily apply rich multimedia style effects to any HTML content to make attractive and dynamic web pages.

Some of the filter effects include blur, shadow, and glow, which can apply without using any external or multimedia tool.

Can apply filters to almost all the elements of HTML except for the SELECT, OPTION, TR, THEAD, TBODY, and TFOOT elements.

There are two types of filters: visual filter and transitions. A visual filter affects the appearance of the content, whereas, transitions determine how the content will be loaded on the page.

filter property Can apply filters to HTML elements by using the filter

property of the style attribute. Filters are implemented in an HTML page by using CSS.

There are two ways of specifying filters. First, the value of the filter property is a string that

describes the filter. It starts with the progrid word, which is a program identifier and it identifies the filter as an ActiveX.

Second, the filter name is directly specified without using the progrid code. Filters are treated as objects of the element.

Syntax:Style = “filter:progid:DXImageTransform.Microsoft.filtername(property)”;

Example:H1{ width:100%; filter:progid:DXImageTransform.Microsoft.glow(); }

filter property - Demo

Demo: S14_Filter.html

Visual filters You can specify filters for both static and dynamic web

pages. Multiple filters can be applied for a single HTML element or a group of HTML elements.

In the dynamic web pages, you specify filter in JavaScript code to highlight specific content on an occurrence of an event.

There are some types of filter: Static visual effects: are widely used filters that apply a static

effect such as a text with a glow effect or blur effect. Dynamic visual filters: implement basic interactivity in web

pages. The effect of these filters becomes visible when the user generates an event that results in applying dynamic changes to the page.

Disable element effect: You often use many images or icons to determine whether a particular button or link is accessible by the user. This results in more processing time to load images. However, using filters, you can use only a single image and change its visual appearance to determine whether it is accessible by the user.

Static filters: Chroma Static filters are visual filters that specify or

modify only appearance of HTML content of a web page. They provide static effects to the text and images.

The Chroma filter renders a particular color of the content as transparent.

There are some properties of Chroma filter: Color: specifies or retrieves the color that

needs to appear in transparent. Enabled: determines whether Chroma filter is

enable.

Static filters: DropShadow The DropShadow filter renders a thick outline

behind the content. This layout gives an effect of floating shadow in a particular direction.

There are some properties of DropShadow filter: Color: specifies or retrieves the color that needs to

appear in transparent. Enabled: determines whether DropShadow filter is

enable. OffX: specifies or retrieves the offset value of shadow

from the content along the x-axis. OffY: specifies or retrieves the offset value of shadow

from the content along the y-axis.

Static filters: Shadow The Shadow filter provides the same effect as

that of DropShadow filter, except for the floating illusion of the shadow.

There are some properties of Shadow filter: Color: specifies or retrieves the color that needs to

appear in transparent. Enabled: determines whether Shadow filter is enable. Direction: specifies or retrieves the direction of the

shadow. The value of this value is in degrees. Strength: specifies or retrieves the area in which the

effect of the filter extends. The value of this value is in pixels.

Static filters: Wave The Wave filter displays the content in in a wave-like

effect in the browser. It creates an illusion of a wave-like motion being applied to the content.

There are some properties of Shadow filter: Enabled: determines whether Wave filter is enable. Freq: specifies or retrieves the number of waves to be

applied to the content by the filter. LighStrength: specifies or retrieves the light’s intensity

difference between the crests and trenches of the waves. Phase: specifies or retrieves the offset at which the wave

will begin. Strength: specifies or retrieves the area in which the effect

of the filter extends. The value of this property is in pixels.

Static filters - Demo

Demo: S14_StaticFilter.html

Static filters: Alpha The Alpha specifies the opaque of the content.. Properties of Alpha filter:

Enabled: determines whether alpha filter is enable. FinishOpacity: specifies or retrieves the level of opacity at the

gradient’s end. FinishX: specifies or retrieves the horizontal position, which is the

location where the gradient end. FinishY: specifies or retrieves the vertical position, which is the

location where the gradient end. StartX: specifies or retrieves the horizontal position, which is the

location where the gradient starts. StartY: specifies or retrieves the vertical position, which is the

location where the gradient starts. Opacity: specifies or retrieves the level of opacity at the starting of

gradient. Style: specifies or retrieves the shape of the gradient. The possible

values of this property include Uniform, Linear, Radial and Rectangular.

Static filters: BasicImage The BasicImage specifies the image direction,

color and opacity of the content. There are some properties of BasicImage filter:

Enabled: determines whether BasicImage filter is enable. GrayScale: specifies or retrieves the value that determines the

average of RGB value applied to the content. Invert: specifies or retrieves the value that indicates whether

the complement of the RGB applied to the content. Mask: specifies or retrieves whether the value of Maskcolor

property is applied to the content appearing as transparent. MaskColor: specifies or retrieves the color that will cover the

content appearing as transparent. Rotation: specifies or retrieves the value that determines

whether any of the ninety-degree incremental rotations applied to the content.

Opacity: specifies or retrieves the level of opacity applied to the content.

Static filters: Blur The Blur filter specifies the content such

that look unclear. There are some properties of Blur filter:

Enabled: determines whether Blur filter is enable. MakeShadow: specifies or retrieves the value, which

indicates whether the content is converted to a shadow. PixelRadius: specifies or retrieves the radius of the region

where the pixel, which is affected by the filter, is surrounded by the opaque content.

ShadowOpacity: specifies or retrieves the level of opacity applied to the shadow.

Alpha-BasicImage-Blur filters - Demo

Demo: S14_Alpha_BasicImage_Blur.html

Procedural surface filters A procedural surface appears between the

content of an element and the element’s background. It specifies RGB and transparency values for each pixel on the screen dynamically.

There are two types of procedural surface filters: AlphaImageLoader filter Gradient filter

AlphaImageLoader filters AlphaImageLoader filter is a procedural surface

filter. That allows displaying an image between the element’s background and content. The image always exists within the element’s boundaries.

The properties of AlphaImageLoader filter: Enable: determines whether the AlphaImageLoader

filter is enable. sizingMethod: specifies or retrieves the method to load

an image within an element’s boundaries. The values are crop, image and scale.

src: specifies the URL of an image that needs to be loaded within an element’s boundaries.

AlphaImageLoader filters - Demo

Demo: S14_Filter.html

Gradient filters Gradient filter renders a colored surface between

the content and background of an element. The properties of Gradientfilter:

Enable: determines whether the Gradient filter is enable.

EndColor: specifies or retrieves the ultimate opaque color for the surface.

EndColorStr: specifies or retrieves the ultimate color for the surface.

GradientType: specifies or retrieves the direction of gradient.

StartColor: specifies or retrieves the starting opaque color for the surface.

EndColorStr: specifies or retrieves the starting color for the surface.

AlphaImageLoader filters - Demo

Demo: S14_Gradient.html

Transitions Transitions are dynamic filters that affect the

loading of the content. They provide effects based on time, which allow you animate images. Transitions offer style effects to web pages, which allow you to create slide shows in web pages.

Transitions can be specified in static and dynamic pages. They are:

Nonevent transitions: provide nonchanging transitions along a time interval and are similar to static filters.

Event-driven transitions: are those transitions, which are applied on an occurrence of an event.

Complex transitions: refer to combing filters and transitions to create interactive and attractive visual effects.

Box and Circle transitions Iris filter provides an iris effect to disclose new content. The

filter provides the box-in, box-out, circle-in, circle-out effects to display content dynamically.

Syntax:filter:progid:DXImageTransform.Microsoft.Iris(prop); Properties

Duration: specifies or retrieves the period to complete the transition.

Enable: determines whether the Iris filter is enable. IrisStyle: specifies or retrieves the sharp of the filter. The

values are diamond, cross, plus, square and star. Motion: specifies or retrieves whether content is disclosed from

the edges to center or from the center to edges. The values are in or out.

Status: retrieves the condition of transition effect. Percent: specifies or retrieves the position in a transition.

Methods: apply, play and stop.

Wipe transitions Wipe transition divides the existing content into strips that

move in a direction to display the new content and finally disappears.

In HTML pages, the Blinds filter allows to apply the wipe to disclose the content dynamically.

Syntax:filter:progid:DXImageTransform.Microsoft.BLinds(prop); Properties

Bands: specifies or retrieves the number of bars or trips to divide the content at the time of transition.

Enable: determines whether the Blinds filter is enable. Duration: specifies or retrieves the period to complete the

transition. Direction: specifies or retrieves the direction of the transition

movement (left, right, up and down). Status: retrieves the condition of transition effect. Percent: specifies or retrieves the position in a transition from

where the capture to display a static filter output will take place.

Wipe transitions Wipe transition divides the existing content into strips that

move in a direction to display the new content and finally disappears.

In HTML pages, the Blinds filter allows to apply the wipe to disclose the content dynamically.

Syntax:filter:progid:DXImageTransform.Microsoft.BLinds(prop); Properties

Bands: specifies or retrieves the number of bars or trips to divide the content at the time of transition.

Enable: determines whether the Blinds filter is enable. Duration: specifies or retrieves the period to complete the

transition. Direction: specifies or retrieves the direction of the transition

movement (left, right, up and down). Status: retrieves the condition of transition effect. Percent: specifies or retrieves the position in a transition from

where the capture to display a static filter output will take place.

AlphaImageLoader filters - Demo

Demo: S14_IrisTransition.html

transition - Demo

Demo: S14_Transitions.html

TextRange Object TextRange object is a feature of DHTML that provides text

manipulation operations for the dynamic content such as searching and copying text. It allows you to select characters, words, and sentences from a web document.

The uses of the TextRange object includes: Navigating through the text. Searching and replacing text. Copying and pasting text.

There are two steps to create the TextRange object: Create a text to specify the beginning and ending

locations to specify the desire range of text. Perform the required operations on the enclosed text to

fulfill a specific task such as copying the text and pasting it at the desire location.

TextRange properties The CreateTextRange()method creates a TextRange

object when you apply the method to a BODY, TEXTAREA, or BUTTON element. Another method namely, CreateRange() creates the object when a text is selected in the browser.

After creating the object, you can manipulate text by using its properties and methods.

Properties: boundingHeight: Gets the rectangle’s height in pixels,

which surrounds the object. boundingWidth: Gets the rectangle’s width in pixels,

which surrounds the object. htmlText: represents the HTML source. text: sets or gets the text within the specified range.

TextRange methods Methods:

collapse(): shifts the current point of selection towards the starting or at the end of the text range.

duplicate(): Creates a new replica of the object. findText(): finds the specified text and marks the

beginning and end points of the range to include the found text.

inRange: retrieves a value, which determines whether a range exists within another range.

isEqual: retrieves a value, which determines whether the given range is identical to the current range.

move: collapses the specified text range and shifts the blank range backward or forward.

moveEnd: modifies the end location of the text range. moveStart: modifies the beginning location of the text

range.

TextRange methods Methods:

moveToElementText(): shifts the range such that the beginning and end locations include the text in the specified HTML element.

parentElement(): returns the parent element for specified range.

pastHTML(): replaces the text in the current text range by pasting the specified HTML text.

select: selects the text identical to the text in the text range of the object.

setEndPoint: specifies the end point of a text range according to the end point of another text range.

TextRange- Demo

Demo: S14_Textrange.html

Summary Filter and transition are features of DHTML

that allow applying animation and multimedia effect.

Most of these are similar to the transition by Powerpoint.

TextRange object can access and change the text of the Web document.

Filter object allows to define and apply visual effect to HTML Web pages

There are two types filters: visual filters and transitions.