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

Creating a draggable content pop up

A draggable content pop up is similar to a modal window. However, it is movable by the user and does not come with a backdrop to focus the user's attention, allowing them to view other content at the same time. This recipe will adapt the modal code used in the preceding recipe and the jQuery code from the Creating a basic drag-and-drop functionality recipe that you saw earlier in this chapter.

Getting ready

Even though we will be re-using code from previous chapters, ensure that you have recipe-11.html, recipe-11.css, and recipe-11.js created and ready for use.

How to do it…

Perform the following steps:

  1. Add the following HTML code to recipe-11.html to create a modal and a basic web page:

    <!DOCTYPE html>
<html>
<head>
    <title>Chapter 6 :: Recipe 11</title>
    <link href="recipe-11.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="recipe-11.js"></script...
Previous Section
End of Chapter 6
Next Chapter