Book Image

jQuery 2.0 Development Cookbook

By : Leon Revill
Book Image

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
jQuery 2.0 Development Cookbook
Leon Revill
Feb, 2014 | 410 pages
No titles found
Table of Contents (17 chapters)
jQuery 2.0 Development Cookbook
jQuery 2.0 Development Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Document Object Model Manipulation
Document Object Model Manipulation
Introduction
Selecting elements
Finding and selecting sibling elements
Creating DOM elements
Inserting content into an element
Modifying the DOM element properties
Adding and removing CSS classes to dynamically change their style
Enabling and disabling buttons by changing their properties
Updating an image within a page
Populating list elements
Understanding pagination
Removing DOM elements
Re-using DOM elements
2
Interacting with the User by Making Use of jQuery Events
Interacting with the User by Making Use of jQuery Events
Introduction
Detecting button clicks
Detecting element clicks
Detecting change
Updating content based on user input
Detecting key press events on inputs
Restricting input character length
Changing page elements on mouse hover
Triggering events manually
Preventing event triggers
Creating a custom event
3
Loading and Manipulating Dynamic Content with AJAX and JSON
Loading and Manipulating Dynamic Content with AJAX and JSON
Introduction
Loading HTML from a web server into a page
Using AJAX and handling server errors
Processing JSON data
Searching JavaScript objects
Sorting JavaScript objects
Caching JSON and AJAX requests
Creating a search feature
Creating an autosuggest feature
Waiting for an AJAX response
4
Adding Attractive Visuals with jQuery Effects
Adding Attractive Visuals with jQuery Effects
Introduction
Sliding page elements
Hiding and showing elements
Fading elements
Toggling effects
Stopping effects
Chaining effects
Creating a basic photo gallery
Creating a blinking button
Removing elements with effects
5
Form Handling
Form Handling
Introduction
Implementing basic form validation
Adding number validation
Adding credit card number validation
Adding date validation
Adding e-mail address validation
Implementing live form validation
Adding a password strength indicator
Adding anti-spam measures
Implementing input character restrictions
6
User Interface
User Interface
Introduction
Manipulating element CSS
Creating a news ticker
Creating sticky elements
Implementing smooth scrolling
Creating a dynamic table of contents
Creating a basic drag-and-drop functionality
Creating a dynamic animated tree menu
Creating an accordion content slider
Creating tabbed content
Creating a modal pop up
Creating a draggable content pop up
7
User Interface Animation
User Interface Animation
Introduction
Creating an animated login form
Adding photo zoom
Creating an animated content slider
Animating background images
Creating an animated navigation menu
8
Understanding Plugin Development
Understanding Plugin Development
Introduction
Creating a plugin template
Creating a tooltip plugin
Building a content and image slider plugin
Creating an RSS feed reader plugin
Coding an image cropper plugin from scratch
9
jQuery UI
jQuery UI
Introduction
Creating stylish and functional buttons
Creating dialog boxes for user information and input
Implementing progress bars within your application
Adding date picker interfaces to input boxes quickly
Creating an autocomplete search feature
10
Working with jQuery Mobile
Working with jQuery Mobile
Introduction
Creating a basic mobile website template
Building a complete static website
Building a dynamic mobile website
Implementing the quick call functionality
Implementing the send SMS functionality
Adding mobile-friendly lists
Using touch-oriented events
Creating mobile-compatible forms
Building a complete registration and login system
Building a complete mobile web app
Index
Index

Updating content based on user input

jQuery allows developers to easily process user input and then update the page to reflect this input. The previous recipes of this chapter have looked at detecting changes on input values and clicks on various page elements. This recipe will help you to create a web page that will update a header element based on the title that has been selected from a drop-down menu.

Getting ready

Create a blank HTML document named recipe-4.html, with the latest version of the jQuery library downloaded and ready for use.

How to do it…

Using techniques similar to those you have learned in the previous recipes, perform the following steps to make changes to the DOM based on user interaction:

  1. Add the following HTML code to recipe-4.html, which you have just created; don't forget to update the reference to the jQuery library. This HTML creates a basic HTML web page with a drop-down menu element, allowing the user to choose a number of titles. There is also a header element that...

Previous Section
End of Section 6
Next Section