JavaScript Bible, Gold Edition part 100 potx

filter Object Properties Methods Event Handlers See text Syntax Accessing filterobject properties and methods: IE4+ document.all.objectID.style.filters[i].property | method[parameters] I

Miscellaneous properties accelerator

Controls: Whether an accelerator key is defined for an element.

Value: Boolean

Example: elementRef.style.accelerator = “true”

behavior

Controls: The external behavior to be applied to the current element.

Value: Space-delimited list of URL values URLs can be a file location, an OBJECT

element id, or one of the built-in (default) behaviors.

Example: elementRef.style.behavior = “url(#default#anchorClick)”

cssText

Controls: Actual CSS rule text (read-only) This property exists by virtue of the

browser’s object model and is not part of the CSS specification There is no corresponding CSS attribute.

Value: String

Example: var cssRuleText = elementRef.style.cssText

imeMode

elementRef.style.imeMode

Controls: Whether text is entered into a text INPUT or TEXTAREA element through

the Input Method Editor (for languages, such as Chinese, Japanese, or Korean).

Value: Constant auto | active | inactive | disabled

Example: elementRef.style.imeMode = “active”

Aural properties

Although these properties are defined in the CSS2 specification and placeholders

exist for them in NN6, the styles are not implemented in NN6 The script equivalent

properties are listed here for the sake of completeness only.

azimuth

cue

cueAfter

cueBefore

elevation

pause

pauseAfter

pauseBefore

pitch

pitchRange

playDuring

richness

speak

speakHeader

speakNumeral

speakPunctuation

speechRate

stress

voiceFamily

volume

Controls: A variety of styles primarily for browsers that support speech synthesis

output.

Value: Consult http://www.w3.org/TR/REC-CSS2/aural.html for details on

aural style sheets.

filter Object

Properties Methods Event Handlers

(See text)

Syntax

Accessing filterobject properties and methods:

(IE4+) document.all.objectID.style.filters[i].property |

method([parameters])

(IE5.5+) document.all.objectID.style.filters[filterName].property |

method([parameters])

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

About this object

Earlier in this chapter, the style.filterproperty was shown to allow reading and writing of the string value that is assigned to an element’s style.filter prop-erty Filters are available in IE for Windows only, and not for the Mac as of IE5/Mac, even though IE5/Mac returns the style.filterproperty value The purpose of this section is to teach you not how to use filters but rather, how to script them Multiple filters are merely part of the space-delimited list of filters Some filter types have additional specifications For example, the glow()filter has three properties that more clearly define how the element should be rendered with a glow effect The style sheet rule for an element whose ID is glowerlooks like the following:

#glower {filter:glow(color=yellow, strength=5, enabled=true)}

Accessing the currentStyle.filterproperty for that element yields the string value:

glow(color=yellow, strength=5, enabled=true)

Attempting to modify a single sub-property of the glow()filter by way of string parsing would be cumbersome and hazardous at best For example, imagine trying

to increment the glow filter’s strengthproperty by 5.

elementRef.style.filterObject

Reading and writing sub-properties

A cleaner way to work with individual properties of a filter is to access the filter

as an object belonging to the element affected by the filter Each type of filter object

has as its properties the individual sub-properties that you set in the style sheet.

Continuing with the glow()filter example, you could access just the color

prop-erty of the filter as follows:

var currColor = document.all.glower.currentStyle.filters[“glow”].color

The reference is through the currentStyleproperty for reading the value,

because in this case, the filter is applied in a style sheet definition, and only the

currentStyleproperty reveals the effective style properties acting on an element.

To modify the color, assign a new value to the filterobject’s property, but do so

through the element’s styleproperty:

document.all.glower.style.filters[“glow”].color = “green”

To increment a numeric value, such as increasing the glow()filter’s strength

property by 5, use a construction such as the following (long-winded though it may

be):

document.all.glower.style.filters[“glow”].strength =

document.all.glower.currentStyle.filters[“glow”].strength + 5

Table 30-1 lists the filter object names that work all the way back to IE4 and the

properties associated with each filter type.

Table 30-1 IE4-Compatible Static Filter Types

Filter Name Description and Properties

alpha() Transparency level

Properties: opacity (0 to 100)

finishopacity (0 to 100) style (gradient shape

0 to 3) startX (coordinate

integer) startY (coordinate

integer) finishX (coordinate

integer) finishY (coordinate

integer) blur() Simulating blurred motion

Properties: add (1 or 0)

Continued

Table 30-1 (continued)

Filter Name Description and Properties

direction (0, 45, 90, 135,

180, 225, 270, 315)

strength (pixel count) chroma() Color transparency

Properties: color (color value) dropShadow() Shadow effect

Properties: color (color value)

offx (horizontal offset

pixels) offy (vertical offset

pixels) positive (1 or 0) flipH() Horizontally mirrored image

Properties: None flipV() Vertically mirrored image

Properties: None glow() Outer edge radiance

Properties: color (color value)

strength (intensity 1 to

255) gray() Eliminate color

Properties: None invert() Opposite hue, saturation,

brightness levels Properties: None light() Add light source

(controlled by methods) Properties: None mask() Overlay transparent mask

Properties: color (color value) shadow() Render as silhouette

elementRef.style.filterObject

Filter Name Description and Properties

Properties: color (color value)

direction (0, 45, 90, 135,

180, 225, 270, 315)

wave() Add sine-wave distortion

Properties: add (1 or 0)

freq (integer number

of waves) light (strength 0 to

100) phase (percentage

offset 0 to 100) strength (intensity 0 to

255) xRay() Render edges only

Properties: None

In addition to the static filter types, which are applied to content and sit there

unless modified by script, the IE4+ filterobject also provides types for blends

and reveals for transitions between visible and invisible elements Scripting

transi-tions to act when a script hides or shows an element requires a few lines of code,

including calls to some of the filterobject’s methods First, Table 30-2 shows the

IE4+ syntax for transition filters.

Table 30-2 IE4+ Transition Filters

Filter Name Description and Properties

blendTrans() Fades out old element,

fades in new element Properties: duration (floating point number

of seconds) Methods: apply() (freezes current display)

play() (plays the transition) stop() (stops transition

mid-stream)

Continued

Table 30-2 (continued)

Filter Name Description and Properties

revealTrans() Reveals element to be

shown through an effect Properties: duration (floating-point

number of seconds) transition (code number for

effect)

0 Box in

1 Box out

2 Circle in

3 Circle out

4 Wipe up

5 Wipe down

6 Wipe right

7 Wipe left

8 Vertical blinds

9 Horizontal blinds

10Checkerboard across

11Checkerboard down

12Random dissolve

13Split vertical in

14Split vertical out

15Split horizontal in

16Split horizontal out

17Strips left down

18Strips left up

19Strips right down

20Strips right up

21Random bars horizontally

22Random bars vertically

elementRef.style.filterObject

Filter Name Description and Properties

23Random effect Methods: apply() (freezes current display)

play() (plays the transition) stop() (stops transition

mid-stream)

To make a transition work under script control, a filter must be applied to the

element that you want the transition to work on That can be done by script or by

assigning a filter style to the element As for the scripting, you begin by invoking

the apply()method of the desired filterobject Next, script the change, such as

assigning a new URL to the srcproperty of an IMG element While you do this, the

apply()method freezes the image until you invoke the play()method on the

fil-ter Listing 30-1 effects a checkerboard transition between two images after you

click the image.

Listing 30-1: A Reveal Transition Between Images

<HTML>

<HEAD>

<TITLE>IE4+ Transition</TITLE>

<STYLE TYPE=”text/css”>

IMG {filter:revealTrans(transition=10)}

</STYLE>

<SCRIPT LANGUAGE=”JavaScript”>

function doReveal() {

document.all.myIMG.filters[“revealTrans”].apply()

if (document.all.myIMG.src.indexOf(“desk1”) != -1) {

document.all.myIMG.src = “desk3.gif”

} else {

document.all.myIMG.src = “desk1.gif”

}

document.all.myIMG.filters[“revealTrans”].play()

}

</SCRIPT>

</HEAD>

<BODY>

<H1>IE4+ Transition</H1>

<HR>

<P>Click on the image to cause a reveal transition.</P>

<IMG ID=”myIMG” SRC=”desk1.gif” HEIGHT=90 WIDTH=120 onClick=”doReveal()”>

</BODY>

</HTML>

Building on the example in Listing 30-1, the next example in Listing 30-2 demon-strates how a script can also modify a filterobject’s property, including a transi-tion filter Before the transitransi-tion filter has its apply()method invoked, the script sets the transition type based on a user choice in a SELECT list.

Listing 30-2: Choosing Reveal Transitions Between Images

<HTML>

<HEAD>

<TITLE>IE4+ Transition and Choices</TITLE>

<STYLE TYPE=”text/css”>

IMG {filter:revealTrans(transition=10)}

</STYLE>

<SCRIPT LANGUAGE=”JavaScript”>

function doReveal() { document.all.myIMG.filters[“revealTrans”].transition = document.forms[0].transChoice.value

document.all.myIMG.filters[“revealTrans”].apply()

if (document.all.myIMG.src.indexOf(“desk1”) != -1) { document.all.myIMG.src = “desk3.gif”

} else { document.all.myIMG.src = “desk1.gif”

} document.all.myIMG.filters[“revealTrans”].play() }

</SCRIPT>

</HEAD>

<BODY>

<H1>IE4+ Transition and Choices</H1>

<HR>

<FORM>

<P>Choose the desired transition type:

<SELECT NAME=”transChoice”>

<OPTION VALUE=0>Box in

<OPTION VALUE=1>Box out

<OPTION VALUE=2>Circle in

<OPTION VALUE=3>Circle out

<OPTION VALUE=4>Wipe up

<OPTION VALUE=5>Wipe down

<OPTION VALUE=6>Wipe right

<OPTION VALUE=7>Wipe left

<OPTION VALUE=8>Vertical blinds

<OPTION VALUE=9>Horizontal blinds

<OPTION VALUE=10>Checkerboard across

<OPTION VALUE=11>Checkerboard down

<OPTION VALUE=12>Random dissolve

<OPTION VALUE=13>Split vertical in

<OPTION VALUE=14>Split vertical out

<OPTION VALUE=15>Split horizontal in

<OPTION VALUE=16>Split horizontal out

<OPTION VALUE=17>Strips left down

elementRef.style.filterObject

<OPTION VALUE=18>Strips left up

<OPTION VALUE=19>Strips right down

<OPTION VALUE=20>Strips right up

<OPTION VALUE=21>Random bars horizontally

<OPTION VALUE=22>Random bars vertically

<OPTION VALUE=23>Random effect

</SELECT>

</FORM>

<P>Click on the image to cause a reveal transition.</P>

<IMG ID=”myIMG” SRC=”desk1.gif” HEIGHT=90 WIDTH=120 onClick=”doReveal()”>

</BODY>

</HTML>

IE5.5 filter syntax changes

While IE5.5/Windows still supports the original IE4 way of controlling filters, the

browser also implements a new filter component, which Microsoft strongly

encour-ages authors to use (as evidenced by the difficulty in finding documentation for the

IE4 syntax at its developer Web site) In the process of implementing this new filter

component, the names of many filters change, as do their individual properties.

Moreover, the way the filter component is invoked in the style sheet is also quite

different from the original component.

The style sheet syntax requires a reference to the new component as well as the

filter name Here is the old way:

#glower {filter:glow(color=yellow, strength=5, enabled=true)}

And here is the new way:

#glower {filter:progid:DXImageTransform.Microsoft.Glow(color=yellow, strength=5,

enabled=true)}

Don’t overlook the extra progid:pointer in the reference This program

identi-fier becomes part of the filter name that your scripts use to reference the filter:

document.all.glower.style.filters[“DXImageTransform.Microsoft.Glow”].color =

“green”

While some of the filter names and properties stay the same (except for the huge

prefix), several older properties are subsumed by new filters whose properties help

identify the specific effect The former revealTrans()filter is now divided among

several new filters dedicated to transition effects Table 30-3 shows the IE5.5 syntax.

Using the new syntax in IE5.5 can cause frequent crashes of the browser (at least

early released versions), especially transition filters If you implement the new

syn-tax, be sure to torture-test your pages extensively

Note