SECOND Pantone: EDITION CMYK: JQUERYGrey scale PANTONE Orange 021 C PANTONE 2955 C NOVICE TO NCMYK IO, 53, N100, 0 JCMYKA 100, 45, 0, 37 NEW KICKS ANDBlack 50% TRICKSBlack 100% BY EARLE CASTLEDINE & CRAIG SHARKIE SIMPLE, FAST, POWERFUL — JAVASCRIPT THE WAY IT SHOULD BE Summary of Contents Preface . xvii 1. Falling in Love with jQuery . 1 2. Selecting, Decorating, and Enhancing . 19 3. Animating, Scrolling, and Resizing . 53 4. Images and Slideshows . 93 5. Menus, Tabs, Tooltips, and Panels . 139 6. Construction, Ajax, and Interactivity . 187 7. Forms, Controls, and Dialogs . 239 8. Lists, Trees, and Tables . 305 9. Plugins, Themes, and Advanced Topics . 347 A. Reference Material . 409 B. JavaScript Tidbits . 419 C. Plugin Helpers . 425 Index . 431 JQUERY: NOVICE TO NINJA BY EARLE CASTLEDINE & CRAIG SHARKIE wnload from Wow! eBook <www.wowebook.com> o D iv jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie Copyright © 2012 SitePoint Pty. Ltd. Product Manager: Simon Mackie Assistant Technical Editor: Diana MacDonald Technical Editor: Tom Museth Indexer: Michele Combes Expert Reviewer: Jörn Zaefferer Cover Designer: Alex Walker Editor: Kelly Steele Printing History: Latest Update: February 2012 First Edition: February 2010 Second Edition: February 2012 Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews. Notice of Liability The authors and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors, will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [email protected] ISBN 978-0-9871530-1-2 (print) ISBN 978-0-9871530-7-4 (ebook) Printed and bound in the United States of America v About Earle Castledine Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr. Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. A senior systems analyst and JavaScript flâneur, he is equally happy in the rapid rivers of Scala, the dense foliage of mobile apps and games, or the fluffy clouds of client-side interaction development. As co-creator of the client-side opus TurnTubelist,1 as well as countless web-based experi- ments, Earle recognizes the Internet not as a lubricant for social change but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies. About Craig Sharkie A degree in Fine Art is a strange entrance to a career with a passion for programming, but that’s where Craig started. A right-brain approach to code and problem-solving has seen him plying his craft in many of the big names of the Web: AOL, Microsoft, Yahoo, Ziff-Davis, and Australia’s Atlassian. Today, you’ll find him coding HTML5 and JavaScript solutions for Telstra Media’s IPTV division, stretching the boundaries of where you might expect to find jQuery. His passion for programming and a fondness for serial commas and the like have led him on a path from journalism, through development, on to conferencing, and now into print. Taking up JavaScript in 1995, he was an evangelist for the “good parts” even before Crockford coined the term, and has seen the language flow from the desktop through mobile, and out to televi- sions and beyond. Being able to start the day with his new daughter just makes seeing where each day leads all the more fascinating. About Tom Museth Tom Museth first fell in love with code while creating scrolling adventure games in BASIC on his Commodore 64, and usability testing them on reluctant family members. He then spent 16 years as a journalist and production editor before deciding web development would be more rewarding. He has a passion for jQuery, PHP, HTML5, and CSS3; is eagerly eyeing the world of mobile dev; and likes to de-stress via a book, a beach, and a fishing rod. 1 http://www.turntubelist.com/ vi About Jörn Zaefferer Jörn Zaefferer is a freelance web developer, consultant, and trainer, residing in Cologne, Germany. Jörn evolved jQuery’s test suite into QUnit, a JavaScript unit-testing framework, and maintains it. He also created and maintains a number of popular plugins. As a jQuery UI development lead, he focuses on the development of new plugins, widgets, and utilities. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for Web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. For Amelia. Thank you. —Earle For Jemima: May it remain others that continue oblivious to the myriad unseen opportunities that lay open before us. —Craig Download from Wow! eBook <www.wowebook.com> Table of Contents Preface . xvii Who Should Read This Book . xviii What’s in This Book . xviii Where to Find Help . xxi The SitePoint Forums . xxi The Book’s Website . xxii The SitePoint Newsletters . xxii The SitePoint Podcast . xxii Your Feedback . xxiii Acknowledgments . xxiii Earle Castledine . xxiii Craig Sharkie . xxiii Conventions Used in This Book . xxiii Code Samples . xxiv Tips, Notes, and Warnings . xxv Chapter 1 Falling in Love with jQuery . 1 What’s so good about jQuery? . 2 Cross-browser Compatibility . 2 CSS3 Selectors . 3 Helpful Utilities . 3 jQuery UI . 4 Plugins . 5 Keeping Markup Clean . 6 Widespread Adoption . 7 What’s the downside? . 7 Downloading and Including jQuery . 8 x Downloading jQuery . 8 The Google Content Distribution Network (CDN) . 10 Other CDN Options . 11 Nightlies and Github . 11 Uncompressed or Compressed? . 12 Anatomy of a jQuery Script . 12 The jQuery Alias . 13 Dissecting a jQuery Statement . 13 Bits of HTML, aka “The DOM” . 15 If You Choose to Accept It … . 17 Chapter 2 Selecting, Decorating, and Enhancing . 19 Making Sure the Page Is Ready . 20 Selecting: The Core of jQuery . 21 Simple Selecting . 22 Narrowing Down Our Selection . 24 Testing Our Selection . 25 Filters . 26 Using Multiple Selectors . 26 Becoming a Good Selector . 27 Decorating: CSS with jQuery . 27 Reading CSS Properties . 28 Setting CSS Properties . 28 Classes . 31 Enhancing: Adding Effects with jQuery . 34 Hiding and Revealing Elements . 34 Progressive Enhancement ..