jQuery for Designers Beginner's Guide Second Edition
5/5
()
About this ebook
Natalie MacLees
Natalie MacLees is the founder of Purple Pen Productions (purplepen.com), an interactive agency based in Los Angeles, California. She has been designing websites since 1997 and is a passionate advocate of both accessibility and usability. She loves teaching and sharing her knowledge, both in seminars and workshops and also with her clients. She discovered WordPress a few years ago as a flexible, extendable, and quick way to build robust websites that clients could manage on their own. She is the organizer of the Southern California WordPress Meetup Group. She is also a Google Analytics Qualified Individual.
Related to jQuery for Designers Beginner's Guide Second Edition
Related ebooks
jQuery Hotshot Rating: 0 out of 5 stars0 ratingsLearning Adobe Muse Rating: 4 out of 5 stars4/5Bootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5WordPress Web Application Development Rating: 5 out of 5 stars5/5Responsive Web Design by Example : Beginner's Guide - Second Edition Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsjQuery 1.3 with PHP Rating: 0 out of 5 stars0 ratingsjQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsjQuery UI 1.7: The User Interface Library for jQuery Rating: 0 out of 5 stars0 ratingsJavaScript Mobile Application Development Rating: 0 out of 5 stars0 ratingsMastering jQuery UI Rating: 0 out of 5 stars0 ratingsPHP Ajax Cookbook Rating: 2 out of 5 stars2/5Learning Bootstrap Rating: 1 out of 5 stars1/5jQuery Design Patterns Rating: 0 out of 5 stars0 ratingsNode.js Blueprints Rating: 0 out of 5 stars0 ratingsResponsive Design High Performance Rating: 0 out of 5 stars0 ratingsPHP Team Development Rating: 3 out of 5 stars3/5The PHP Workshop: Learn to build interactive applications and kickstart your career as a web developer Rating: 0 out of 5 stars0 ratingsGoogle Maps JavaScript API Cookbook Rating: 2 out of 5 stars2/5WordPress 3 Plugin Development Essentials Rating: 4 out of 5 stars4/5jQuery for Designers Beginner's Guide Rating: 5 out of 5 stars5/5JavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and JavaScript Rating: 0 out of 5 stars0 ratingsHello! HTML5 & CSS3: A User Friendly Reference Guide Rating: 0 out of 5 stars0 ratingsWeb Design Playground: HTML & CSS The Interactive Way Rating: 5 out of 5 stars5/5You Want to Do What with PHP? Rating: 3 out of 5 stars3/5AJAX Interview Questions, Answers, and Explanations: AJAX Certification Review Rating: 0 out of 5 stars0 ratingsWordpress Web Application Development - Third Edition Rating: 0 out of 5 stars0 ratingsWeb Developer's Reference Guide Rating: 0 out of 5 stars0 ratingsjQuery UI 1.10: The User Interface Library for jQuery Rating: 0 out of 5 stars0 ratings
Programming For You
Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Excel 101: A Beginner's & Intermediate's Guide for Mastering the Quintessence of Microsoft Excel (2010-2019 & 365) in no time! Rating: 0 out of 5 stars0 ratingsLearn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5C# Programming from Zero to Proficiency (Beginner): C# from Zero to Proficiency, #2 Rating: 0 out of 5 stars0 ratingsPYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Python Data Structures and Algorithms Rating: 5 out of 5 stars5/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5SQL: For Beginners: Your Guide To Easily Learn SQL Programming in 7 Days Rating: 5 out of 5 stars5/5Learning JavaScript Data Structures and Algorithms Rating: 5 out of 5 stars5/5Beginning Programming with C++ For Dummies Rating: 4 out of 5 stars4/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsCoding All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsLinux Command-Line Tips & Tricks Rating: 0 out of 5 stars0 ratingsC Programming For Beginners: The Simple Guide to Learning C Programming Language Fast! Rating: 5 out of 5 stars5/5
Reviews for jQuery for Designers Beginner's Guide Second Edition
1 rating0 reviews
Book preview
jQuery for Designers Beginner's Guide Second Edition - Natalie MacLees
Table of Contents
jQuery for Designers Beginner's Guide Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Designer, Meet jQuery
What is jQuery?
Why is jQuery awesome for designers?
It uses CSS selectors you already know
It uses HTML markup you already know
Impressive effects in just a few lines of code
Huge plugin library available
Great community support
JavaScript basics
Progressive enhancement and graceful degradation
Gotta keep 'em separated
Content
Presentation
Behavior
Designer, Meet JavaScript
Variables
Objects
Functions
Downloading jQuery and getting set up
Time for action – downloading and attaching jQuery
What just happened?
Pop quiz – setting up a new project
Another option for using jQuery
Your first jQuery script
Time for action – getting ready for jQuery
What just happened?
Adding a paragraph
Time for action – adding a new paragraph
What just happened?
Have a go hero – adding more content
Summary
2. Enhancing Links
Simple tabs
Time for action – creating simple tabs
What just happened?
Pop quiz – working with events
Designer, meet plugins
Choosing a plugin
Simple custom tooltips
Time for action – simple custom tooltips
What just happened?
Customizing PowerTip's appearance
Time for action – customizing PowerTip
What just happened?
Enhancing navigation with tooltips
Time for action – building a fancy navigation bar
What just happened?
Showing other content in tooltips
Time for action – showing custom content in tooltips
What just happened?
Have a go hero – create clickable tooltips for an image gallery
Summary
3. Making a Better FAQ Page
Marking up the FAQ page
Time for action – setting up the HTML file
What just happened?
Time for action – moving around an HTML document
What just happened?
Sprucing up our FAQ page
Time for action – making it fancy
What just happened?
We're almost there!
Time for action – adding some final touches
What just happened?
Summary
4. Building an Interactive Navigation Menu
The horizontal drop-down menu
Time for action – creating a horizontal drop-down menu
What just happened?
The vertical fly-out menu
Time for action – creating a vertical fly-out menu
What just happened?
Customizing the navigation menu
:hover and .sfHover
Cascading inherited styles
Pop quiz – understanding the cascade in CSS
Styling the :focus pseudoclass
Time for action – customizing Superfish menus
What just happened?
The hoverIntent plugin
Time for action – incorporating custom animations
What just happened?
Have a go hero – further customizing the Superfish menu
Summary
5. Showing Content in Lightboxes
A simple photo gallery
Time for action – setting up a simple photo gallery
What just happened?
Customizing Colorbox's behavior
Transition
Time for action – using a custom transition
What just happened?
Fixed size
Time for action – setting a fixed size
What just happened?
Creating a slideshow
Time for action – creating a slideshow
What just happened?
Fancy login
Time for action – creating a fancy login form
What just happened?
Video player
Time for action – showing a video in a lightbox
What just happened?
Pop quiz – loading content into Colorbox
A one-page web gallery
Time for action – creating a one-page web gallery
What just happened?
Have a go hero – create a custom Colorbox
Summary
6. Creating Slideshows and Sliders
Planning a slideshow or slider
A simple crossfade slideshow
Time for action – creating a simple crossfade slideshow
What just happened?
Pop quiz – working with jQuery chaining
Using the Basic Slider plugin
Time for action – building a Basic Slider
What just happened?
Have a go hero – customize the Basic Slider
Creating a Cycle2 slideshow
Time for action – building a slideshow with Cycle2
The Cycle2 carousel
Time for action – building a Cycle2 carousel
Combining a carousel with a slideshow
Setting up the carousel
Time for action – creating the carousel controller
Adding the slideshow
Time for action – adding the slideshow
Connecting the carousel and the slider
Time for action – connecting the carousel and the slider
Summary
7. Working with Responsive Designs
Using FitVids for responsive videos
Time for action – resizing videos
What just happened?
Pop quiz – choosing breakpoints for responsive design
Responsive menus
Time for action – making our menu responsive
What just happened?
Have a go hero – create a custom menu
Creating a tiled layout
Time for action – creating a masonry layout
What just happened?
Creating a tiled layout with items of different widths
Time for action – creating a tiled layout with different width items
What just happened?
Summary
8. Getting the Most from Images
Lazy loading images
Time for action – lazy loading images
What just happened?
Pop quiz – building accessible pages
Creating zoomable images
Time for action – creating zoomable images
What just happened?
Zooming in on multiple images
Time for action – creating multiple zoomable images
What just happened?
Using fullscreen backgrounds
Time for action – creating a fullscreen background image
What just happened?
Creating a fullscreen slideshow
Time for action – creating a fullscreen slideshow
What just happened?
Summary
9. Improving Typography
Sizing headlines perfectly
Time for action – sizing headlines to the screen width
What just happened?
Creating bold text blocks
Time for action – creating a bold text block with SlabText
What just happened?
Pop quiz – sizing text in responsive designs
Styling individual letters
Time for action – using Lettering.js to style letters
What just happened?
Have a go hero – creating fancy effects with Lettering.js
Setting text on a curve
Time for action – setting text on a curve with the ArcText plugin
What just happened?
Summary
10. Displaying Data Beautifully
A basic data grid
Time for action – creating a basic data grid
What just happened?
A customized data grid
Time for action – customizing the data grid
What just happened?
Pop quiz – building correct tables
Showing graphs and charts
Time for action – showing data in graphs and charts
What just happened?
Creating pie charts
Time for action – creating a pie chart
Using charts and graphs in responsive designs
Time for action – calculating the ideal size for charts and graphs
What just happened?
Summary
11. Reacting to Scrolling
Setting up the document
Time for action – setting up the HTML file
What just happened?
Setting up HTML for scrolling animations
Time for action – setting up HTML for Scrollorama
What just happened?
Adding a parallax effect
Time for action – creating a parallax effect
What just happened?
Creating other animations
Time for action – creating a horizontal animation
What just happened?
Have a go hero – add custom animations
Adding navigation
Time for action – adding navigation to sections of the page
What just happened?
Pop quiz – using Scrollorama in responsive design
Summary
12. Improving Forms
An HTML5 web form
Time for action – setting up an HTML5 web form
What just happened?
Pop quiz – working with HTML5 form elements
Setting focus
Time for action – setting focus to the first field
What just happened?
Validating site visitor entry
Time for action – validating form values on the fly
What just happened?
Improving the appearance
Time for action – improving form appearance
What just happened?
Styling the unstyleable
Time for action – adding Fancyform to style the unstyleable
Have a go hero – a fully custom form
Summary
A. Pop Quiz Answers
Chapter 1, Designer, Meet jQuery
Pop quiz – setting up a new project
Chapter 2, Enhancing Links
Pop quiz – working with events
Chapter 4, Building an Interactive Navigation Menu
Pop quiz – understanding the cascade in CSS
Chapter 5, Showing Content in Lightboxes
Pop quiz – loading content into Colorbox
Chapter 6, Creating Slideshows and Sliders
Pop quiz – working with jQuery chaining
Chapter 7, Working with Responsive Designs
Pop quiz – choosing breakpoints for responsive design
Chapter 8, Getting the Most from Images
Pop quiz – building accessible pages
Chapter 9, Improving Typography
Pop quiz – sizing text in responsive designs
Chapter 10, Displaying Data Beautifully
Pop quiz – building correct tables
Chapter 11, Reacting to Scrolling
Pop quiz – using Scrollorama in responsive design
Chapter 12, Improving Forms
Pop quiz – working with HTML5 form elements
Index
jQuery for Designers Beginner's Guide Second Edition
jQuery for Designers Beginner's Guide Second Edition
Copyright © 2014 Packt Publishing
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 embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2012
Second edition: July 2014
Production reference: 1220714
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78328-453-5
www.packtpub.com
Cover image by Suresh Mogre (<[email protected]>)
Credits
Author
Natalie MacLees
Reviewers
Olivier Pons
M. Ali Qureshi
Dan Wellman
Acquisition Editor
Vinay Argekar
Content Development Editor
Neeshma Ramakrishnan
Technical Editors
Pramod Kumavat
Pooja Nair
Mukul Pawar
Copy Editors
Janbal Dharmaraj
Deepa Nambiar
Alfida Paiva
Project Coordinators
Priyanka Goel
Danuta Jones
Proofreaders
Simran Bhogal
Maria Gould
Ameesha Green
Indexers
Hemangini Bari
Mehreen Deshmukh
Rekha Nair
Tejal Soni
Priya Subramani
Graphics
Valentina D'silva
Production Coordinators
Pooja Chiplunkar
Manu Joseph
Cover Work
Pooja Chiplunkar
About the Author
Natalie MacLees is a frontend web developer and UI designer, and the founder and principal of the interactive agency Purple Pen Productions. She founded and runs the jQuery LA users' group and together with Noel Saw, she heads the Southern California WordPress user's group, organizing WordPress meetups, help sessions, and workshops. She was the lead organizer for WordCamp Los Angeles 2013 and 2014 and organized the first annual Website Weekend LA. She's also the founder of the Los Angeles chapter of Girl Develop It, bringing affordable and accessible coding classes to the community.
She makes periodic appearances on the WPwatercooler podcast and co-hosts the WP Unicorn Project podcast with Suzette Franck. She makes her online home at nataliemac.com.
Her obsession with the Web began when she bought her first computer in 1996 and promptly used it to build her first website. She spends the few moments she manages to be offline each day watching baseball, crafting, reading, baking, belly dancing, collecting Hello Kitty items, and avoiding avocados and olives at all costs.
Acknowledgments
Gracious thanks first and foremost to John Resig and the rest of the jQuery team for creating and sharing such a useful and elegant library with the rest of us.
A big thank you to Marlene Angel, Ninno DePatrick, Ed Doolittle, Crystal Ehrlich, Suzette Franck, Teresina Goheen, LeHang Huynh, Michelle Kempner, Mark Tapio Kines, Chloë Nguyễn, Mario Noble, Joss Rogers, Noel Saw, Kimberly Wilkinson, and Tammy Wilson for their support, advice, and cheerleading—I couldn't ask for better friends.
Thank you to Beebe Lee and Brittany Brooks, my Purple Pen support team.
Thank you to my sisters, Stefanie Elder and Bethany MacLees, for being properly impressed that somebody wanted me to write a book. Thank you to my mom, Patricia Demby, and stepfather, John Demby, for being proud of me no matter what.
Thank you to all members of our local WordPress and jQuery communities including Dre Armeda, Lucy Beer, Andrew Behla, Glenn Bennett, Stephen Carnam, Jason Cosper, Ryan Cowles, Joe Chellman, Gregory Dahl, Greg Douglas, Brandon Dove, Chris Ford, Gregg Franklin, Megan Gray, Lane Halley, John Hawkins, Susie Karasic, Chris Lema, Paul Lumsdaine, Kari Leigh Marucchi, Karim Marucchi, Karen McCamy, Andrei Mignea, Troy Miles, Konstantin Obenland, Joseph Karr O'Connor, David Oshima, Sé Reed, Andy Roberts, Mike Schroder, Adam Silver, Verious Smith, Jason Tucker, Nathan Tyler, Alex Vasquez, Sarah Wefald, Steve Zehngut, Jeffery Zinn, and too many others to count or mention.
And finally, thank you to Diane Colella Jones for believing in me, even before I did.
About the Reviewers
Olivier Pons is a developer who's been building websites since 1997. He's a teacher at IngeSup (École Supérieure d'Ingénierie Informatique; for more information visit http://www.ingesup.com/ and http://www.y-nov.com), at the University of Sciences (IUT) in Aix-en-Provence/France, and École d'Ingénieurs des Mines de Gardanne, where he teaches HTML, CSS, jQuery/jQuery Mobile, PHP, MVC fundamentals, WordPress, Symfony, Linux basics, and advanced VIM techniques. He has already done some technical reviews, including the books Ext JS 4 First Look, Packt Publishing and jQuery Mobile Web Development Essentials Second Edition, Packt Publishing, among others. In 2011, he left a full-time job as a Delphi and PHP developer to concentrate on his own company, HQF Development (http://hqf.fr). He currently runs a number of websites, including http://www.benativo.fr, http://www.inesushi.com, http://www.papdevis.fr, and http://olivierpons.fr, his own web development blog. He works as a consultant, teacher, project manager, and sometimes a developer.
M. Ali Qureshi, who is a web developer based in Lahore, Pakistan, has been involved in web development in 2001. Having worked in a number of companies in different capacities, he is aware of how project goals are achieved efficiently. Ali founded PI Media (http://parorrey.com) in 2002 and has developed creative, interactive, and usable web solutions, making them a successful technology investment for clients. He has also worked on a number of successful products and authored WordPress plugins and themes and osCommerce and PrestaShop add-ons.
Apart from PI Media, Ali currently works as a software architect for E2ESP (http://e2esp.com)and ConvoSpark (http://convospark.com). He regularly makes contributions to the latest tips and trends in web design, PHP, WordPress and CMS development, Flash ActionScript, and Facebook App Development on his blog http://parorrey.com/blog/.
Ali has previously reviewed jQuery Mobile Web Development Essentials, Packt Publishing. When not working, he spends his time blogging and exploring new technologies. He is an avid sports fan and especially likes watching cricket. Pakistan and Australia are his favorite teams.
Dan Wellman is an author and software engineer based in the south coast of the UK. By day, he works for the Skype division at Microsoft bringing web-based audio and video calling to the world. By night, he writes books and tutorials for many online digital media outlets including Nettuts, Infinite Skills, and many others. He has written seven books so far, mostly centered on jQuery and jQuery UI.
www.PacktPub.com
Support files, eBooks, discount offers, and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print and bookmark content
On demand and accessible via web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
This book is intended for designers who have a basic understanding of HTML and CSS, but want to advance their skill set by learning basic JavaScript. It's not necessary that you understand JavaScript well. Even if you've never attempted to write JavaScript before, this book will guide you through the process of setting up basic JavaScript and accomplishing common tasks such as collapsing content, drop-down menus, and slideshows; all thanks to the jQuery library.
What this book covers
Chapter 1, Designer, Meet jQuery, is an introduction to the jQuery library and JavaScript. You'll learn about jQuery's rise to fame, why it's so great for designers, and how it can help you create some fancy special effects without having to learn a lot of code. This chapter also includes a gentle and small introduction to JavaScript, progressive enhancement, and graceful degradation, and guides you through writing your first JavaScript code.
Chapter 2, Enhancing Links, walks you through some basic enhancements to links. You'll learn how to use jQuery to turn a list of links into a tabbed interface. Then, we'll take our first look at jQuery plugins where you'll learn to add custom tooltips to your links using the jQuery PowerTip plugin.
Chapter 3, Making a Better FAQ Page, will introduce you to collapsing and showing content, as well as creating simple animations and traversing an HTML document to move from one element to another. In this chapter, we'll set up a basic FAQ list, then work to progressively enhance it to make it easier for our site visitors to use.
Chapter 4, Building an Interactive Navigation Menu, guides you through setting up fully functioning and visually stunning drop-down and fly-out menus. We'll walk through the complex CSS required to get these types of menus working, use the Superfish plugin to fill in features missing from pure CSS solutions, and then take a look at customizing the appearance of the menus.
Chapter 5, Showing Content in Lightboxes, will walk you through showing photos and slideshows in a lightbox using the Colorbox jQuery plugin. Once we get the basics down, we'll also take a look at using the Colorbox plugin to create a fancy login, play a collection of videos, and even set up a single-page website gallery.
Chapter 6, Creating Slideshows and Sliders, walks you through setting up a simple crossfade slideshow without a plugin. Then, we'll take a look at the Basic Slider plugin to create a simple slideshow with controls. Finally, we'll take a look at the Cycle2 plugin, a flexible and customizable option that can be used to create sliders, slideshows, and carousels.
Chapter 7, Working with Responsive Designs, will dive deep into jQuery techniques for responsive designs. This includes fitting videos to the viewport, turning a drop-down menu into a responsive menu, and building a tiled layout for displaying image galleries.
Chapter 8, Getting the Most from Images, walks you through a few techniques to work with images in a more effective way. We'll take a look at lazy-loading images so that images are only loaded if our site visitor scrolls to them. We'll add an image zoom capability and finally, we'll take a look at creating fullscreen background images and slideshows for our pages.
Chapter 9, Improving Typography, shows you techniques to deal with typography effectively in responsive designs. We'll take a look at the FitText plugin to fit headlines to the width of the browser window, the SlabText plugin to create multiline headlines, the Lettering.js plugin to fine-tune kerning and to apply special effects, and finally, the ArcText plugin to set a text on a curve.
Chapter 10, Displaying Data Beautifully, takes a look at the important task of displaying data in an easy-to-understand way for your site visitors. First of all, we'll take a look at turning an ordinary HTML table into an interactive data grid with the DataTables plugin. Then, we'll look at turning HTML tables into charts and graphs that communicate our data clearly to our site visitors in an accessible and progressively enhanced way.
Chapter 11, Reacting to Scrolling, dives into the fun task of scrolling animations and parallax effects. We'll use the Scrollorama plugin to create a parallax effect, trigger animations on scroll, and activate a navigation bar that reacts to us scrolling down the page.
Chapter 12, Improving Forms, takes a look at how forms can be improved. This chapter walks you through setting up an HTML form properly using some of the latest HTML5 form elements. Then, we enhance the form by placing the cursor in the first field and validating the site visitor's form entries. Finally, we take a look at the FancyForm jQuery plugin, which allows us to style even the most stubborn and challenging form elements to achieve a consistent look for our forms across browsers.
What you need for this book
You'll need a text editor to create HTML, CSS, and JavaScript files. Some great free options available are TextWrangler for Mac or Notepad++ for Windows. There are many other options available, and you are free to use your favorite text editor for any of the examples in this book. My personal favorite is Sublime Text, which is easy to work with and has a very nice feature set. If you haven't tried it before, I encourage you to download an evaluation copy for free to give it a try.
You'll also need a browser. My personal favorite is Google Chrome, which includes some really helpful built-in debugging tools for both CSS and JavaScript. Again, you are free to use your favorite browser for the examples in the book.
If you want to create images for your own designs, then Adobe Photoshop and Adobe Illustrator will be helpful, though they are not strictly necessary. All images needed to set up the examples used in this book are included in the sample code.
jQuery and jQuery plugins are being updated all the time. As new browsers are released with new support and capabilities, and as JavaScript, HTML, and CSS are further developed, new versions of jQuery and plugins are released to keep pace with the change. On one hand, this is a great news—jQuery and accompanying plugins get faster and more powerful all the time. On the other hand, it can be tough to keep up with all the changes. All versions of the plugins referenced were current at the time of writing the book, but you might find some differences when you work through the exercises. Plugin developers are usually very good at documenting the changes and updates, so don't be afraid to read through the documentation so you can understand what's changed and what adjustments you might need to make.
Who this book is for
This book is for designers who know the basics of HTML and CSS, but want to extend their knowledge by learning how to use JavaScript and jQuery.
Conventions
In this book, you will find several headings that appear frequently.
To give clear instructions of how to complete a procedure or task, we use:
Time for action – heading
Action 1
Action 2
Action 3
Instructions often need some extra explanation so that they make sense, so they are followed with:
What just happened?
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
Pop quiz – heading
These are short multiple-choice questions intended to help you test your own understanding.
Have a go hero – heading
These are practical challenges that give you ideas for experimenting with what you have learned.
You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: This returns the tag wrapped in a jQuery object.
A block of code is set as follows:
var x = 5;
var y = 2;
var z = x + y;
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
stylesheet href=styles/styles.css
/>
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: Just go to your browser's File menu and choose Save Page As... or right-click on the page and select Save As....
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Downloading the color images of this book
We also provide you a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from the following link:
https://www.packtpub.com/sites/default/files/downloads/4535OS_ColoredImages.pdf
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Designer, Meet jQuery
You might have heard quite a lot about jQuery over the past couple of years. It has quickly become one of the most popular code packages in use on the Web today. And you might