SECOND EDITION JavaScript DHTML Cookbool(

Danny Goodman

OREILLY® Beijing • Cambridge • Farnham • Kln • Paris • Sebastopol • Taipei • Tokyo Table of Contents

Preface xiii

1. Strings 1 1.1 Concatenating (Joining) Strings 4 1.2 Improving String Handling Performance 6 1.3 Accessing Substrings 7 1.4 Changing String Case 8 1.5 Testing Equality of Two Strings 9 1.6 Testing String Containment Without Regular Expressions 11 1.7 Testing String Containment with Regular Expressions 13 1.8 Searching and Replacing Substrings 14 1.9 Using Special and Escaped Characters 15 1.10 Reading and Writing Strings for Cookies 17 1.11 Converting Between Unicode Values and String Characters 20 1.12 Encoding and Decoding URL Strings 21 1.13 Encoding and Decoding Base64 Strings 23

2. Numbers and Dates 27 2.1 Converting Between Numbers and Strings 31 2.2 Testing a Number's Validity 33 2.3 Testing Numeric Equality 34 2.4 Rounding Floating-Point Numbers 35 2.5 Formatting Numbers for Text Display 36 2.6 Converting Between Decimal and Hexadecimal Numbers 39 2.7 Generating Pseudorandom Numbers 41 2.8 Calculating Trigonometric Functions 41 2.9 Creating a Date Object 42 2.10 Calculating a Previous or Future Date 43 2.11 Calculating the Number of Days Between Two Dates 45 2.12 Validating a Date 47

3. Arrays and Objects 51 3.1 Creating a Simple Array 54 3.2 Creating a Multidimensional Array 56 3.3 Converting Between Arrays and Strings 57 3.4 Doing Something with the Items in an Array 59 3.5 Sorting a Simple Array 61 3.6 Combining Arrays 63 3.7 Dividing Arrays 64 3.8 Creating a Custom Object 65 3.9 Simulating a Hash Table for Fast Array Lookup 69 3.10 Doing Something with a Property of an Object 71 3.11 Sorting an Array of Objects 72 3.12 Customizing an Object's Prototype 74 3.13 Converting Arrays and Custom Objects to Strings 79 3.14 Using Objects to Reduce Naming Conflicts 82

4. Variables, Functions, and Flow Control 85 4.1 Creating a JavaScript Variable 85 4.2 Creating a Named Function 89 4.3 Nesting Named Functions 92 4.4 Creating an Anonymous Function 93 4.5 Delaying a Function Call 94 4.6 Branching Execution Based an Conditions 97 4.7 Handling Script Errors Gracefully 101 4.8 Improving Script Performance 103 5. Browser Feature Detection 107 5.1 Detecting the Browser Brand 113

5.2 Detecting an Early Browser Version 113

5.3 Detecting the Version 115

5.4 Detecting the Mozilla Version 116

5.5 Detecting the Version 118

5.6 Detecting the Version 119

5.7 Detecting the Client Operating System 120

5.8 Detecting Object Support 121

vi Table of Contents 5.9 Detecting Object Property and Method Support 124 5.10 Detecting W3C DOM Standard Support 126 5.11 Detecting the Browser Written Language 127 5.12 Detecting Cookie Availability 128 5.13 Defining Browser- or Feature-Specific Links 129 5.14 Testing an Multiple Browser Versions 130

6. Managing Browser Windows 132 6.1 Living with Browser Window Control Limitations 135 6.2 Setting the Main Window's Size 136 6.3 Positioning the Main Window 137 6.4 Maximizing the Main Window 138 6.5 Creating a New Window 139 6.6 Bringing a Window to the Front 143 6.7 Communicating with a New Window 144 6.8 Communicating Back to the Main Window 147 6.9 Using Internet Explorer Modal/Modeless Windows 148 6.10 Simulating a Cross-Browser Modal Dialog Window 151 6.11 Simulating a Window with Layers 158

7. Managing Multiple Frames 173 7.1 Creating a Blank Frame in a New Frameset 178 7.2 Changing the Content of One Frame from Another 179 7.3 Changing the Content of Multiple Frames at Once 181 7.4 Replacing a Frameset with a Single Page 182 7.5 Avoiding Being "Framed" by Another Site 183 7.6 Ensuring a Page Loads in Its Frameset 184 7.7 Reading a Frame's Dimensions 187 7.8 Resizing Frames 188 7.9 Setting Frameset Specifications Dynamically 192

8. Dynamic Forms 194 8.1 Auto-Focusing the First Text Field 197 8.2 Performing Common Text Field Validations 198 8.3 Preventing Form Submission upon Validation Failure 204 8.4 Auto-Focusing an Invalid Text Field Entry 207 8.5 Using a Custom Validation Object 208 8.6 Changing a Form's Action 213 8.7 Blocking Submissions from the Enter Key 214

Talge of Contents I vii 8.8 Advancing Text Field Focus with the Enter Key 215 8.9 Submitting a Form by an Enter Key Press in Any Text Box 216 8.10 Disabling Form Controls 217 8.11 Hiding and Showing Form Controls 219 8.12 Allowing Only Numbers (or Letters) in a Text Box 221 8.13 Auto-Tabbing for Fixed-Length Text Boxes 223 8.14 Changing select Element Content 224 8.15 Copying Form Data Between Pages 227

9. Managing Events 231 9.1 Equalizing the IE and W3C Event Models 236 9.2 Initiating a Process After the Page Loads 240 9.3 Appending Multiple Load Event Handlers 242 9.4 Determining the Coordinates of a Click Event 244 9.5 Preventing an Event from Performing Its Default Behavior 248 9.6 Blocking Duplicate Clicks 251 9.7 Determining Which Element Received an Event 252 9.8 Determining Which Mouse Button Was Pressed 254 9.9 Reading Which Character Key Was Typed 256 9.10 Reading Which Noncharacter Key Was Pressed 257 9.11 Determining Which Modifier Keys Were Pressed During an Event 260 9.12 Determining the Element the Cursor Rolled From/To 262 9.13 Synchronizing Sounds to Events 266

10. Page Navigation Techniques 268 10.1 Loading a New Page or Anchor 271 10.2 Keeping a Page Out of the Browser History 273 10.3 Using a select Element for Navigation 274 10.4 Passing Data Between Pages via Cookies 276 10.5 Passing Data Between Pages via Frames 278 10.6 Passing Data Between Pages via URLs 280 10.7 Creating a Contextual (Right-Click) Menu 283 10.8 Creating Drop-Down Navigation Menus 291 10.9 Providing Navigation Trail Menus 305 10.10 Creating Expandable Menus 308 10.11 Creating Collapsible XML Menus 320

viii I Table of Contents 11. Managing Style Sheets 331 11.1 Assigning Style Sheet Rules to an Element Globally 333 11.2 Assigning Style Sheet Rules to a Subgroup of Elements 334 11.3 Assigning Style Sheet Rules to an Individual Element 336 11.4 Importing External Style Sheets 337 11.5 Importing Browser- or Operating System-Specific Style Sheets 338 11.6 Changing Imported Style Sheets After Loading 340 11.7 Enabling/Disabling Style Sheets 341 11.8 Toggling Between Style Sheets for an Element 342 11.9 Overriding a Style Sheet Rule 343 11.10 Turning Arbitrary Content into a Styled Element 344 11.11 Creating Center-Aligned Body Elements 345 11.12 Reading Effective Style Sheet Property Values 346 11.13 Forcing Recent Browsers into Standards-Compatibility Mode 348

12. Visual Effects for Stationary Content 351 12.1 Precaching Images 354 12.2 Swapping Images (Rollovers) 356 12.3 Reducing Rollover Image Downloads with JavaScript 358 12.4 Reducing Rollover Image Downloads with CSS 362 12.5 Dynamically Changing Image Sizes 366 12.6 Changing Text Style Properties 367 12.7 Offering Body Text Size Choices to Users 370 12.8 Creating Custom Link Styles 374 12.9 Changing Page Background Colors and Images 375 12.10 Hiding and Showing Elements 378 12.11 Adjusting Element Transparency 379 12.12 Creating Transition Visual Effects 381 12.13 Drawing Charts in the Canvas Element 385

13. Positioning HTML Elements 392 13.1 Making an Element Positionable in the Document Space 397 13.2 Connecting a Positioned Element to a Body Element 398 13.3 Controlling Positioning via a DHTML JavaScript Library 400 13.4 Deciding Between div and span Containers 407 13.5 Adjusting Positioned Element Stacking Order (Z-order) 409 13.6 Centering an Element an Top of Another Element 410 13.7 Centering an Element in a Window or Frame 412

Table of Contents ix

13.8 Determining the Location of a Nonpositioned Element 414

13.9 Animating Straight-Line Element Paths 415

13.10 Animating Circular Element Paths 419

13.11 Creating a Draggable Element 421

13.12 Scrolling div Content 426 432 13.13 Creating a Custom Scrollbar 13.14 Creating a Slider Control 445

14. Creating Dynamic Content 452

14.1 Writing Dynamic Content During Page Loading 453

14.2 Creating New Page Content Dynamically 454

14.3 Including External HTML Content 456

14.4 Embedding XML Data 458

14.5 Embedding Data As JavaScript Objects 460

14.6 Transforming XML Data into HTML Tables 463

14.7 Transforming JavaScript Objects into HTML Tables 466

14.8 Converting an XML Node Tree to JavaScript Objects 469

14.9 Creating a New HTML Element 470

14.10 Creating Text Content for a New Element 473

14.11 Creating Mixed Element and Text Nodes 474

14.12 Inserting and Populating an iframe Element 476

14.13 Getting a Reference to an HTML Element Object 478

14.14 Referencing All Elements of the Same Class 480

14.15 Replacing Portions of Body Content 482

14.16 Removing Body Content 483

14.17 Using XMLHttpRequest for a REST Request 485

14.18 Using XMLHttpRequest for a SOAP Call 488

14.19 Sorting Dynamic Tables 491

14.20 Walking the Document Node Tree 494

14.21 Capturing Document Content 498

15. Dynamic Content Applications 500 15.1 Displaying a Random Aphorism 501 15.2 Converting a User Selection into an Arbitrary Element 504 15.3 Automating the Search-and-Replace of Body Content 506 15.4 Designing a User-Editable Content Page 512 15.5 Creating a Slide Show 515 15.6 Auto-Scrolling the Page 523 15.7 Greeting Users with Their Time of Day 524

x I Table of Contents 15.8 Displaying the Number of Days Before Christmas 525 15.9 Displaying a Countdown Timer 527 15.10 Creating a Calendar Date Picker 534 15.11 Displaying an Animated Progress Bar 542

A. Keyboard Event Character Values 548

B. Keyboard Key Code Values 550

C. ECMAScript Reserved Keywords 552

Index 553

fable of Contents I xi