www.it-ebooks.info Plug-in JavaScript 100 POWER SOLUTIONS Robin Nixon New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto www.it-ebooks.info Copyright © 2011 by The McGraw-Hill Companies. All rights reserved. Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher. ISBN: 978-0-07-173862-0 MHID: 0-07-173862-2 The material in this eBook also appears in the print version of this title: ISBN: 978-0-07-173861-3, MHID: 0-07-173861-4. All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefi t of the trademark owner, with no intention of infringement of the trademark. Where such designations appear in this book, they have been printed with initial caps. McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs. To contact a representative please e-mail us at bulksales@mcgraw-hill.com. Information has been obtained by McGraw-Hill from sources believed to be reliable. However, because of the possibility of human or mechani- cal error by our sources, McGraw-Hill, or others, McGraw-Hill does not guarantee the accuracy, adequacy, or completeness of any information and is not responsible for any errors or omissions or the results obtained from the use of such information. TERMS OF USE This is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGrawHill”) and its licensors reserve all rights in and to the work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail to comply with these terms. THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MER- CHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting therefrom. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been advised of the possibility of such damages. This limitation of liability shall apply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise. www.it-ebooks.info J8M<?LE;I<;JF=?FLIJ F=GIF>I8DD@E>K@D< GCL>$@E These handy guides are packed with ready-to- run plug-ins you can use right away to create dynamic Web content. Every plug-in offers a full working solution for a result you can achieve immediately, using complete code you simply drop into your own programs. Valuable customization tips are also included in these practical resources. Robin Nixon is a developer and freelance tech- nical writer who has published more than 500 articles in magazines such as PC Plus, PCW, Web User, .net, PC Advisor, and PC Answers. Available everywhere computer books are sold, in print and ebook formats. www.it-ebooks.info For Julie www.it-ebooks.info About the Author Robin Nixon has worked with and written about computers since the early 1980s (his first computer was a Tandy TRS 80 Model 1 with a massive 4KB of RAM!). Since then, he has written in excess of 500 articles for many of the U.K.’s top computer magazines. Plug-in JavaScript is his sixth book. Robin lives on the southeast coast of England with his wife Julie, who is a trained nurse, and five children. He also finds time to foster three disabled children and works full time from home as a technical author. Also by Robin Nixon The PC Companion, Sigma Press, 1993, ISBN 978-150585138 The Amstrad Advanced User Guide, Sigma Press, 1993, ISBN 978-150585152 Learning PHP, MySQL, and JavaScript, O’Reilly, 2009, ISBN 978-0596157135 Ubuntu: Up and Running, O’Reilly, 2010, ISBN 978-0596804848 Plug-in PHP, McGraw-Hill Professional, 2010, ISBN 978-0071666596 About the Technical Editor Alan Solis has more than 30 years experience designing, writing, and maintaining software for companies ranging from small start-ups to large corporations. He currently designs and maintains websites and web applications using PHP, JavaScript, Java, and various relational databases. In his spare time, Alan enjoys creative writing and is a published short story and poetry author. Alan lives in the San Jose, California area with his wife, Cheryl. v www.it-ebooks.info Contents at a Glance 1 Making the Best Use of These Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 JavaScript, CSS, and the DOM 13 3 The Core Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4 Location and Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 5 Visibility 97 6 Movement and Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 7 Chaining and Interaction 177 8 Menus and Navigation 211 9 Text Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 10 Audio and Visual Effects 289 11 Cookies, Ajax, and Security 321 12 Forms and Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 13 Solutions to Common Problems 359 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 v www.it-ebooks.info This page intentionally left blank www.it-ebooks.info Contents Acknowledgments xxiii Introduction xxv 1 Making the Best Use of These Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Downloading and Installing Web Browsers 2 Choosing a Program Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Managing Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Older Versions of Microsoft Internet Explorer 6 Emulating Internet Explorers 6 and 7 . . . . . . . . . . . . . . . . . . . . . . . . . . 7 The Companion Website 8 Including All the Plug-ins 9 Including Single Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Where to Include the JavaScript 10 Cherry Picking Code Sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Bug Fixing and Reporting 10 Waiting Until the Web Page Has Loaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2 JavaScript, CSS, and the DOM 13 The Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Accessing the DOM from JavaScript 16 Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Accessing Styles in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 JavaScript and Semicolons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3 The Core Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Plug-in 1: O() 24 About the Plug-in 24 Variables, Arrays, and Functions 24 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 How To Use It 30 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Plug-in 2: S() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 About the Plug-in 32 Variables, Arrays, and Functions 32 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 How To Use It 33 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 vii www.it-ebooks.info viii Plug-in JavaScript: 100 Power Solutions Contents ix Plug-in 3: Initialize() 35 About the Plug-in 35 Variables, Arrays, and Functions 36 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 How To Use It 39 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Plug-in 4: CaptureMouse() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 About the Plug-in 40 Variables, Arrays, and Functions 41 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 How To Use It 41 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Plug-in 5: CaptureKeyboard() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 About the Plug-in 43 Variables, Arrays, and Functions 44 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 How To Use It 44 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Plug-in 6: FromKeyCode() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 About the Plug-in 46 Variables, Arrays, and Functions 46 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 How To Use It 46 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Plug-in 7: GetLastKey() 48 About the Plug-in 48 Variables, Arrays, and Functions 48 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 How To Use It 48 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Plug-in 8: PreventAction() 49 About the Plug-in 50 Variables, Arrays, and Functions 50 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 How To Use It 51 The Plug-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Plug-in 9: NoPx() and Px() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 About the Plug-ins 53 Variables, Arrays, and Functions 53 How They Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 How To Use Them . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 The Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Plug-in 10: X() and Y() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 About the Plug-ins 55 Variables, Arrays, and Functions 55 www.it-ebooks.info [...]... 99 How To Use Itâ•… å°“ å°“ 99 The Plug-in •… å°“ å°“ 100 www.it-ebooks.info xi xii Plug-in JavaScript: 100 Power Solutions Plug-in 32: Visible()â•… å°“ å°“ About the Plug-in •… å°“ å°“ Variables, Arrays, and Functionsâ•…... å°“ The Plug-in •… å°“ å°“ www.it-ebooks.info 55 55 56 56 57 57 57 58 59 59 60 60 60 60 61 61 61 62 62 62 63 63 63 64 64 64 65 65 65 66 66 66 67 67 67 67 68 68 68 68 69 69 69 69 69 ix x Plug-in JavaScript: 100 Power Solutions Plug-in 18: DecHex()â•… å°“ å°“ About the Plug-in •… ... 141 142 143 145 146 147 148 148 149 www.it-ebooks.info xiii xiv Plug-in JavaScript: 100 Power Solutions How To Use Itâ•… å°“ å°“ The Plug-in •… å°“ å°“ Plug-in 47: DeflateToggle()â•… å°“ å°“ About the Plug-in •… å°“ å°“ Variables,... How To Use Itâ•… å°“ å°“ The Plug-in •… å°“ å°“ 211 212 212 213 213 214 216 www.it-ebooks.info xv xvi Plug-in JavaScript: 100 Power Solutions Plug-in 61: PopDown()â•… å°“ å°“ About the Plug-in •… å°“ å°“ Variables, Arrays,... 273 274 274 276 278 279 279 280 280 www.it-ebooks.info xvii xviii Plug-in JavaScript: 100 Power Solutions How To Use Itâ•… å°“ å°“ The Plug-in •… å°“ å°“ Plug-in 76: TextRipple()â•… å°“ å°“ About the Plug-in •… å°“ å°“ Variables,... www.it-ebooks.info xxvii This page intentionally left blank www.it-ebooks.info Chapter 1 Making the Best Use of These Plug-ins www.it-ebooks.info 2 Plug-In JavaScript: 100 Power Solutions B ecause JavaScript is supported by all major browsers, you might think that setting yourself up as a JavaScript programmer is as easy as having a text editor and a web browser Well, you could get by with just those,... å°“ The Plug-in •… å°“ å°“ 321 322 322 323 323 324 326 326 327 327 327 328 329 330 330 331 331 331 332 332 333 333 333 334 335 335 335 336 336 336 337 337 337 337 338 338 338 www.it-ebooks.info xix xx Plug-in JavaScript: 100 Power Solutions 12 Forms and Validationâ•… Plug-in 90: FieldPrompt()â•…... To justify this naming, all Java keywords are reserved in JavaScript, its standard library follows Java’s naming conventions, and its Math and Date objects are based on Java 1 classes Also, the trademark name JavaScript now belongs to Oracle Corporation—but the similarities end there xxv www.it-ebooks.info xxvi Plug-in JavaScript: 100 Power Solutions Microsoft’s version, called JScript, was released... å°“ å°“ The Plug-in •… å°“ å°“ Plug-in 39: FadeBetween()â•… å°“ å°“ About the Plug-in •… å°“ å°“ Variables, Arrays, and Functionsâ•… å°“ www.it-ebooks.info 100 100 100 100 101 101 101 102 102 102 102 103 103 103... segments from different plug-ins to build your own About the Plug-ins All this book’s plug-ins are ready to run and can be either typed in (if you don’t have Internet access) or downloaded from pluginjavascript.com, where they are stored as a complete collection in a single file When you visit the website, you can navigate through the plug-ins chapter by chapter and view the JavaScript code highlighted . . . . . . 54 About the Plug-ins 55 Variables, Arrays, and Functions 55 www.it-ebooks.info viii Plug-in JavaScript: 100 Power Solutions Contents ix How. . . . . . 119 About the Plug-in 120 Variables, Arrays, and Functions 120 www.it-ebooks.info xii Plug-in JavaScript: 100 Power Solutions Contents xiii How