JavaScript Bible, Gold Edition part 100 potx

838 Part III ✦ Document Objects Reference Miscellaneous properties accelerator IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 —— No Controls: Whether an accelerator key is defined for an element. Value: Boolean Example: elementRef.style.accelerator = “true” behavior IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 —— No 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 IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 No 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 IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 —— No elementRef.style.imeMode 839 Chapter 30 ✦ Style Sheet and Style Objects 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 IE/Windows IE/Mac NN W3C CSS2 Compatibility ——6Yes elementRef.style.azimuth 840 Part III ✦ Document Objects Reference 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 filter object 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 Compatibility ✓✓ ✓ About this object Earlier in this chapter, the style.filter property 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.filter property 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 glower looks like the following: #glower {filter:glow(color=yellow, strength=5, enabled=true)} Accessing the currentStyle.filter property 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 strength property by 5. elementRef.style.filterObject 841 Chapter 30 ✦ Style Sheet and Style Objects 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 currentStyle property for reading the value, because in this case, the filter is applied in a style sheet definition, and only the currentStyle property reveals the effective style properties acting on an element. To modify the color, assign a new value to the filter object’s property, but do so through the element’s style property: 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 elementRef.style.filterObject 842 Part III ✦ Document Objects Reference 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 843 Chapter 30 ✦ Style Sheet and Style Objects 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+ filter object 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 filter object’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 elementRef.style.filterObject 844 Part III ✦ Document Objects Reference 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 10 Checkerboard across 11 Checkerboard down 12 Random dissolve 13 Split vertical in 14 Split vertical out 15 Split horizontal in 16 Split horizontal out 17 Strips left down 18 Strips left up 19 Strips right down 20 Strips right up 21 Random bars horizontally 22 Random bars vertically elementRef.style.filterObject 845 Chapter 30 ✦ Style Sheet and Style Objects Filter Name Description and Properties 23 Random 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 filter object. Next, script the change, such as assigning a new URL to the src property 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> elementRef.style.filterObject 846 Part III ✦ Document Objects Reference Building on the example in Listing 30-1, the next example in Listing 30-2 demon- strates how a script can also modify a filter object’s property, including a transi- tion filter. Before the transition 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 847 Chapter 30 ✦ Style Sheet and Style Objects <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 elementRef.style.filterObject . 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. 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. only. azimuth cue cueAfter cueBefore elevation pause pauseAfter pauseBefore pitch pitchRange playDuring richness speak speakHeader speakNumeral speakPunctuation speechRate stress voiceFamily volume IE/Windows IE/Mac NN W3C CSS2 Compatibility ——6Yes elementRef.style.azimuth 840 Part III ✦ Document Objects Reference Controls: A variety of styles primarily for browsers that