14. session 14 dhtml filter

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.


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.
 Direction: specifies or retrieves the direction of the transition movement
(left, right, up and down).
 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.
 Direction: specifies or retrieves the direction of the transition movement
(left, right, up and down).
 Percent: specifies or retrieves the position in a transition from where the
capture to display a static filter output will take place.


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.

14. session 14 dhtml filter

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 14. session 14 dhtml filter (20)

More from Phúc Đỗ (15)

Recently uploaded (20)

14. session 14 dhtml filter