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

Fading elements

If showing or hiding elements is not enough, jQuery provides the ability to fade HTML elements in and out. This recipe utilizes the jQuery's fade-in and fade-out functionalities to add more effect when choosing to display or hide elements.

Getting ready

Create a blank HTML file named recipe-3.html and save it in the same directory as the latest version of jQuery.

How to do it…

Use jQuery to fade DOM elements in and out by performing the following steps:

  1. Add the following HTML code to recipe-3.html, ensuring the reference to the jQuery library is correct:

    <!DOCTYPE html>
<html>
<head>
  <title>Chapter 4 :: JQuery Effects :: Recipe 3</title>
  <script src="jquery.min.js"></script>
  <script src="recipe-3.js"></script>
  <link type="text/css" media="screen" rel="stylesheet" href="recipe-3.css" />
</head>
<body>
  <div class="frame">
    <div class="top">
      <label>Add Item:</label>
...
Previous Section
End of Section 5
Next Section