"Create Killer Websites Using the Power of Modern JavaScript"
DHTML Utopia is an easy-to-follow, step-by-step tutorial that will show you how to make your websites more slick, dynamic, and usable.
Add dynamic interactivity to your website with DHTML by combining the power of JavaScript, Cascading Style Sheets(CSS), and the Document Object Model (DOM) to achieve bulletproof, accessible, standards-compliant, and aesthetically pleasing results that work on all browsers.
- Build fancy DHTML effects that can be instantly reused in any project
- Learn to code accessible JavaScript that won't trouble older browsers
- Make search engine friendly, multi-level, drop-down navigation menus
- Create usable forms that auto-complete, just like "Google Suggest"
- Build dynamic web applications using remote scripting techniques/Ajax
DHTML Utopia......Page 4
Table of Contents......Page 10
Introduction......Page 14
What’s In This Book?......Page 15
Whither XHTML?......Page 17
The SitePoint Newsletters......Page 19
Acknowledgements......Page 20
DHTML Technologies......Page 22
Close Container Tags......Page 23
Validate your Page......Page 24
Step up to Semantic HTML......Page 25
A Simple CSS Example......Page 26
Adding JavaScript......Page 28
A Simple JavaScript Example......Page 29
Get Some Tools!......Page 30
Further Reading......Page 31
Summary......Page 32
The Document Object Model......Page 34
What is the DOM?......Page 35
Walking DOM Trees......Page 37
getElementById......Page 38
getElementsByTagName......Page 40
Walking from Parents to Children......Page 41
Changing Element Attributes......Page 42
Changing Text Nodes......Page 43
Changing Style Properties......Page 44
Moving Elements......Page 45
Throwing Away Elements......Page 47
Creating Elements......Page 48
Copying Elements......Page 49
Making an Expanding Form......Page 51
Making Modular Image Rollovers......Page 54
A Sample HTML Page......Page 55
The setupRollovers Function......Page 57
The findTarget Function......Page 59
The mouseover / mouseout Functions......Page 60
Something for Nothing (Almost)......Page 61
Summary......Page 62
About Elements and Events......Page 64
Common Events......Page 65
Hooking up the DOM Way......Page 67
Getting Event Information......Page 70
What Happens After an Event Fires?......Page 71
Assigning Event ListenUtî0¿#vMDł¢k¤¼÷......Page 72
Adding Event Listeners Portably......Page 74
Inspecting Event Objects Portably......Page 76
Stopping Propagation and Default Actions Portably......Page 77
Creating Smarter Links......Page 79
Making Tables More Readable......Page 85
Summary......Page 94
Detecting Browser Features......Page 96
Old-Fashioned Browser Sniffing......Page 97
Modern DOM Feature Sniffing......Page 98
Where Should We Test for DOM Features?......Page 99
Testing Non-DOM Features......Page 100
Sniffing at Work: scrollImage......Page 101
Introducing XPath......Page 0
Demonstrating the DHTML Effect......Page 106
How the Code Works......Page 107
clientX anT}amı¡m !{è/év\b-......Page 109
Browser Detection You Can’t Avoid......Page 110
Calculating Screen Positions......Page 111
Summary......Page 113
Tastefulness and Usability......Page 116
The setTimeout Function......Page 117
Passing in a Function......Page 118
Canceling Timed Code......Page 120
Implementing a Cloc[Æo......Page 123
Handling Errors......Page 125
When to use try and catch......Page 126
Scriptless Animation with GIFs......Page 127
Creating Special Tooltip Content......Page 129
Styling the Tooltips......Page 130
Stacking the Tooltips......Page 131
Designing the DHTML Library......Page 132
Identifying the Library Object Signature......Page 133
Placing Event Listeners......Page 134
Modeling Animation States......Page 136
Starting Movement......Page 137
Executing Movement......Page 138
Full Rising Tooltips Example Listing......Page 140
Summary......Page 144
Forms and ValidatYÚÕÐ>......Page 146
Defending Against Security Exploits......Page 147
Simple Client-Side Validation......Page 148
Using Regular Expressions......Page 149
Connecting Regular Expressions to Fields......Page 150
Preparing Quality Error Messages......Page 152
Validation Processing......Page 153
Displaying an Error......Page 155
Label Field Enhancements......Page 157
Attaching Validation to Form Submission......Page 158
Validation d[pqÖèV)õ"åé¶Þ¨?lyó......Page 159
Full Example: Server Fallback Validation......Page 170
Improving Form Usability......Page 175
Rich-Text Editors......Page 176
Calendar Popups......Page 177
Text Boxes with Suggestions......Page 178
Type-Ahead Drop-Down Lists......Page 180
Summary......Page 187
Advanced Concepts and Menus......Page 188
Create Semantic Menu Content......Page 189
Styling the Menu’s Layout......Page 192
Styling the Menu’s Appearance......Page 194
Hiding the Secondary Content......Page 195
Making the Menu Work......Page 196
Simplistic Menu Events......Page 197
Mouse Event Complexities......Page 199
Fixing the IE Memory Leak......Page 203
Smarter Menu Events......Page 204
Adding Animation......Page 206
Implementing the Animation......Page 208
Starting the Animation......Page 211
The Benefit of Object-Based Programming......Page 213
Summary......Page 217
Remote Scripting......Page 218
Remote Scripting Methods......Page 219
Simple iframe Display......Page 220
Retrieving Data with iframes......Page 222
Overcoming iframe Restrictions......Page 226
Nested Form Design......Page 227
Avoiding Infinite Forms......Page 228
Setting up Content and Scripts......Page 229
Coordinating Parent and Child Pages......Page 232
Submitting Forms Indirectly......Page 235
Serving up the Page......Page 237
Image Swaps......Page 240
Example: Name Resolution......Page 241
XMLHTTP......Page 246
Browser Variations......Page 247
Sarissa: a Cross-Browser Library......Page 248
Example: Checking Usernames......Page 249
Imagining the Solution......Page 250
Building the JavaScript Scripts......Page 253
Other Client-Server Options......Page 258
Example: Learning about Beer......Page 259
Planning the DHTML BUBu&ï{HΫ;......Page 261
Generating the Starting Page from Data......Page 262
Fetching HTML Fragments......Page 264
Fetching and RunnY"M/b^å"ž1ÿ.Z\ø......Page 267
Summary......Page 271
Communicating With The Server......Page 272
Specifying the File Manager......Page 273
Planning the Technology......Page 274
Listing Files and Folders......Page 278
Server Control Commands......Page 282
Implementing Drag-anT2Oy·$ž......Page 284
Simple Drag Target Tactics......Page 286
Smarter Drag Target Tactics......Page 287
Creating Proxy Drag Targets......Page 289
Highlighting a Drag Target......Page 291
Dropping onto the Drag Target......Page 292
Handling Drag-and-Drop Events......Page 294
Expanding and Collapsing Lists......Page 296
Using XML-RPC......Page 298
Calling XML-RPC APIs......Page 300
Exploring the Blogger API......Page 301
Setti^Vа¢¿−…X5¶;ž'µŒº{
”ëöŸ......Page 302
Coordinating Page and Server......Page 304
Summary......Page 307
DOM Alternatives: XPath......Page 308
Applying XPath to XML......Page 311
Example: Parsing RSS Feeds......Page 313
About RSS 1.0......Page 314
Constructing Simple XPaths......Page 316
Adding XML Namespaces......Page 317
Designing the HTML......Page 318
Specifying Script Actions......Page 320
Building the Scripts......Page 322
Summary......Page 325
Index......Page 326