14. session 14 dhtml filter

5,335 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,335
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
187
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

14. session 14 dhtml filter

  1. 1. DHTML Filter Session 14
  2. 2. Objectives Filter. Transition. TextRange Object.
  3. 3. 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.
  4. 4. 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(); }
  5. 5. filter property - DemoDemo: S14_Filter.html
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. Static filters - DemoDemo: S14_StaticFilter.html
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. Alpha-BasicImage-Blur filters - DemoDemo: S14_Alpha_BasicImage_Blur.html
  16. 16. 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
  17. 17. 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.
  18. 18. AlphaImageLoader filters - DemoDemo: S14_Filter.html
  19. 19. 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.
  20. 20. AlphaImageLoader filters - DemoDemo: S14_Gradient.html
  21. 21. 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.
  22. 22. 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.
  23. 23. 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.
  24. 24. 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.
  25. 25. AlphaImageLoader filters - DemoDemo: S14_IrisTransition.html
  26. 26. transition - DemoDemo: S14_Transitions.html
  27. 27. 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.
  28. 28. 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.
  29. 29. 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.
  30. 30. 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.
  31. 31. TextRange- DemoDemo: S14_Textrange.html
  32. 32. 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.

×