book

jQuery 2.0 Development Cookbook

Name: jQuery 2.0 Development Cookbook
Author: Leon Revill
ISBN: 9781783280896

by Leon Revill

February 2014

Intermediate to advanced

410 pages

8h 15m

English

Packt Publishing

Read now

Unlock full access

jQuery 2.0 Development Cookbook
Table of Contents
jQuery 2.0 Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and moreWhy Subscribe?Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for

Conventions
Reader feedback
Customer support
Downloading the example codeDownloading the color images of this bookErrataPiracyQuestions
1. Document Object Model Manipulation
Introduction
Selecting elements
Getting readyHow to do it…How it works…There's more…See also
Finding and selecting sibling elements
Getting readyHow to do it…How it works…There's more…See also
Creating DOM elements
Getting readyHow to do it…How it works…There's more…See also
Inserting content into an element
Getting readyHow to do it…How it works…See also
Modifying the DOM element properties
Getting readyHow to do it…How it works…See also
Adding and removing CSS classes to dynamically change their style
Getting readyHow to do it…How it works…See also
Enabling and disabling buttons by changing their properties
Getting readyHow to do it…How it works…See also
Updating an image within a page
Getting readyHow to do it…How it works…There's more...
Populating list elements
Getting readyHow to do it…How it works…See also
Understanding pagination
Getting readyHow to do it…How it works…
Removing DOM elements
Getting readyHow to do it…How it works…See also
Re-using DOM elements
Getting readyHow to do it…How it works…See also
2. Interacting with the User by Making Use of jQuery Events
Introduction
Detecting button clicks
Getting readyHow to do it…How it works…There's more...See also
Detecting element clicks
Getting readyHow to do it…How it works…See also
Detecting change
Getting readyHow to do it…How it works…There's more...See also
Updating content based on user input
Getting readyHow to do it…How it works…See also
Detecting key press events on inputs
Getting readyHow to do it…How it works…There's more…See also
Restricting input character length
Getting readyHow to do it…How it works…There's more...See also
Changing page elements on mouse hover
Getting readyHow to do it…How it works…There's more…See also
Triggering events manually
Getting readyHow to do it…How it works…There's more...
Preventing event triggers
Getting readyHow to do it…How it works…See also
Creating a custom event
Getting readyHow to do it…How it works…
3. Loading and Manipulating Dynamic Content with AJAX and JSON
Introduction
Loading HTML from a web server into a page
Getting readyHow to do it…How it works…PHPHTMLCSSjQuerySee also
Using AJAX and handling server errors
Getting readyHow to do it…How it works…There's more…
Processing JSON data
Getting readyHow to do it…How it works…PHPHTMLjQuerySee also
Searching JavaScript objects
Getting readyHow to do it…How it works…There's more…See also
Sorting JavaScript objects
Getting readyHow to do it…How it works…There's more…See also
Caching JSON and AJAX requests
Getting readyHow to do it…How it works…PHPHTMLjQueryThere's more…
Creating a search feature
Getting readyHow to do it…How it works…SQLPHPHTMLCSSjQuerySee also
Creating an autosuggest feature
Getting readyHow to do it…How it works…SQL and PHPHTMLCSSjQueryThere's more…See also
Waiting for an AJAX response
Getting readyHow to do it…How it works…HTMLPHPjQuerySee also
4. Adding Attractive Visuals with jQuery Effects
Introduction
Sliding page elements
Getting readyHow to do it…How it works…HTMLjQueryCSSThere's more...See also
Hiding and showing elements
Getting readyHow to do it…How it works…HTMLjQueryThere's more…See also
Fading elements
Getting readyHow to do it…How it works…HTMLCSSjQueryThere's more…See also
Toggling effects
Getting readyHow to do it…How it works…HTMLjQueryThere's more…
Stopping effects
Getting readyHow to do it…How it works…HTMLCSSjQuery
Chaining effects
How to do it…How it works…See also
Creating a basic photo gallery
Getting readyHow to do it…How it works…HTMLCSSjQuery
Creating a blinking button
Getting readyHow to do it…How it works…There's more…See also
Removing elements with effects
Getting readyHow to do it…How it works…There's more…See also
5. Form Handling
Introduction
Implementing basic form validation
Getting readyHow to do it…How it works…HTMLCSSjQueryThere's more...See also
Adding number validation
Getting readyHow to do it…How it works…See also
Adding credit card number validation
Getting readyHow to do it…How it works…See also
Adding date validation
Getting readyHow to do it…How it works…See also
Adding e-mail address validation
How to do it…How it works…There's more…
Implementing live form validation
Getting readyHow to do it…How it works…
Adding a password strength indicator
Getting readyHow to do it…How it works…There's more…See also
Adding anti-spam measures
Getting readyHow to do it…How it works…There's more…See also
Implementing input character restrictions
Getting readyHow to do it…How it works…There's more…
6. User Interface
Introduction
Manipulating element CSS
Getting readyHow to do it…How it works…
Creating a news ticker
Getting readyHow to do it…How it works…There's more…See also
Creating sticky elements
Getting readyHow to do it…How it works…There's more…See also
Implementing smooth scrolling
Getting readyHow to do it…How it works…See also
Creating a dynamic table of contents
Getting readyHow to do it…How it works…There's more…See also
Creating a basic drag-and-drop functionality
Getting readyHow to do it…How it works…See also
Creating a dynamic animated tree menu
Getting readyHow to do it…How it works…There's more…See also
Creating an accordion content slider
Getting readyHow to do it…How it works…See also
Creating tabbed content
Getting readyHow to do it…How it works…There's more…
Creating a modal pop up
Getting readyHow to do it…How it works…There's more…See also
Creating a draggable content pop up
Getting readyHow to do it…How it works…See also
7. User Interface Animation
Introduction
Creating an animated login form
Getting readyHow to do it…How it works…There's more…See also
Adding photo zoom
Getting readyHow to do it…How it works…See also
Creating an animated content slider
Getting readyHow to do it…How it works…There's more…See also
Animating background images
Getting readyHow to do it…How it works…See also
Creating an animated navigation menu
Getting readyHow to do it…How it works…See also
8. Understanding Plugin Development
Introduction
Creating a plugin template
Getting readyHow to do it…How it works…
Creating a tooltip plugin
Getting readyHow to do it…How it works…There's more…
Building a content and image slider plugin
Getting readyHow to do it…How it works…There's more…See also
Creating an RSS feed reader plugin
Getting readyHow to do it…How it works…See also
Coding an image cropper plugin from scratch
Getting readyHow to do it…How it works…Image selection and previewImage crop pluginImage uploadCropping and saving the image with PHPThere's more…See also
9. jQuery UI
Introduction
Creating stylish and functional buttons
Getting readyHow to do it…How it works…There's more…See also
Creating dialog boxes for user information and input
Getting readyHow to do it…How it works…There's more…See also
Implementing progress bars within your application
Getting readyHow to do it…How it works…See also
Adding date picker interfaces to input boxes quickly
Getting readyHow to do it…How it works…
Creating an autocomplete search feature
Getting readyHow to do it…How it works…See also
10. Working with jQuery Mobile
Introduction
Creating a basic mobile website template
Getting readyHow to do it…How it works…There's more…See also
Building a complete static website
Getting readyHow to do it…How it works…See also
Building a dynamic mobile website
Getting readyHow to do it…How it works…There's more…See also
Implementing the quick call functionality
Getting readyHow to do it…How it works…See also
Implementing the send SMS functionality
Getting readyHow to do it…How it works…There's more…See also
Adding mobile-friendly lists
Getting readyHow to do it…How it works…
Using touch-oriented events
Getting readyHow to do it…How it works…See also
Creating mobile-compatible forms
Getting readyHow to do it…How it works…Text inputSelect menuCheckboxes and radio buttonsAdditionalThere's more…
Building a complete registration and login system
Getting readyHow to do it…How it works…HTMLSQLPHPJavaScriptThere's more…See also
Building a complete mobile web app
Getting readyHow to do it…How it works…HTMLSQLPHPJavaScriptThere's more…See also
Index

Content preview from jQuery 2.0 Development Cookbook

Adding photo zoom

Photo zoom is a great effect that can be used in many interfaces to add extra user interaction to a photo gallery or product page so that the user can see smaller images clearly. This recipe will show you how to add the photo zoom effect to four images in a list.

Getting ready

You are going to need four images to use in this recipe. Make sure they are fewer than 800 px wide and 600 px high. Once you have collected the four images that will be used in this recipe, create recipe-2.html, recipe-2.css, and recipe-2.js in the same directory as these images and the jQuery library.

How to do it…

Perform the following instructions to add the zoom effect to your chosen images:

Add the following HTML code to recipe-2.html; ensure that you update ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781783280896

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design