jQuery Recipes: Find Ready-Made Solutions to All Your jQuery Problems

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: JQuery Basics
What Is jQuery?
Understanding the DOM
Selectors
Types of Selectors
1-1. Including the jQuery Library in a Web Page
Problem
Solution
How It Works
1-2. Getting the Document Ready Before Processing
Problem
Solution
How It Works
1-3. Applying a Style to a Wrapper Set
Problem
Solution
How It Works
1-4. Applying a Style to Specific Paragraphs
Problem
Solution
addClass() Method
How It Works
1-5. Counting Paragraphs of a Specific Class and Applying Styles to Them
Problem
Solution
How It Works
1-6. Returning to a Prior Selection
Problem
Solution
How It Works
1-7. Removing a DOM and Prepending and Appending Elements
Problem
Solution
remove()
prepend()
append()
How It Works
1-8. Applying Chaining to Apply Styles on Selected List Elements
Problem
Solution
find()
How It Works
1-9. Using a for Loop to Display Elements of an Unordered List
Problem
Solution
children()
How It Works
1-10. Replacing a DOM Element
Problem
Solution
replaceWith(new_content)
How It Works
1-11. Replacing Text and HTML
Problem
Solution
How It Works
1-12. Cloning a DOM
Problem
Solution
How It Works
1-13. Displaying Siblings
Problem
Solution
How It Works
1-14. Setting and Getting Attributes
Problem
Solution
attr()
How It Works
1-15. Counting the Number of Nodes in the DOM and Displaying Their Text
Problem
Solution
How It Works
each()
text()
parent()
1-16. Obtaining the HTML of an Element
Problem
Solution
How It Works
1-17. Assigning the Same Class Name to Different HTML Elements and Applying Styles to Them
Problem
Solution
How It Works
1-18. Summary
Chapter 2: Arrays and Iteration
2-1. Sorting an Array
Problem
Solution
sort()
append()
length Property
How It Works
reverse()
2-2. Splitting an Array into Two
Problem
Solution
splice()
join()
How It Works
2-3. Searching and Displaying Desired Values from a Numerical Array
Problem
Solution
grep()
How It Works
2-4. Concatenating Two Arrays
Problem
Solution
merge()
concat()
How It Works
2-5. Searching for Desired Information in a String Array
Problem
Solution
indexOf()
index()
How It Works
2-6. Manipulating Array Elements
Problem
Solution
Converting Names to Uppercase
Using an Ordered List
each()
How It Works
2-7. Converting a Numerical Array into a String and Finding Its Substring
Problem
Solution
How It Works
2-8. Creating an Array of Objects and Displaying the Content
Problem
Solution
How It Works
2-9. Using Associative Arrays
Problem
Solution
How It Works
2-10. Sorting an Array of Objects
Problem
Solution
How It Works
2-11. Summary
Chapter 3: Understanding the Event Model
3-1. Displaying a Message on Getting Focus and When Blurred
Problem
Solution
on()
focus()
blur()
trigger()
How It Works
3-2. Finding Which Mouse Button Is Pressed
Problem
Solution
mousedown()
event.which
How It Works
3-3. Changing the Style on a Mouse Entering and Leaving an HTML Element
Problem
Solution
mouseenter()
mouseleave()
mouseover()
mouseout()
How It Works
3-4. Using a Mouse Hover Event to Change the Style on a Button
Problem
Solution
hover()
How It Works
3-5. Using Mouse Up and Down Events to Show and Hide an Image
Problem
Solution
mouseup()
fadeOut()
fadeIn()
How It Works
3-6. Making Two Buttons, One for Hiding and One for Displaying an Image
Problem
Solution
slideDown()
off()
hide()
How It Works
3-7. Zoom In and Out of an Image Using toggleClass
Problem
Solution
toggleClass()
How It Works
3-8. Avoiding Event Bubbling
Problem
Solution
How It Works
stopPropagation()
3-9. Knowing Which Key Is Down, Pressed, or Released
Problem
Solution
keydown()
keypress()
keyup()
How It Works
3-10. Applying a Fading Effect to an Image
Problem
Solution
fadeTo()
How It Works
3-11. Applying Animation on an Image
Problem
Solution
animate()
How It Works
3-12. Triggering Events Automatically
Problem
Solution
How It Works
trigger()
3-13. Disabling a Button After It Is Clicked Once
Problem
Solution
How It Works
3-14. Finding the Screen Coordinates of a Mouse-Button Press
Problem
Solution
How It Works
3-15. Highlighting Text Dynamically
Problem
Solution
How It Works
3-16. Making an Image Bright or Blurred with Mouse Movements
Problem
Solution
How It Works
3-17. Creating Image-Based Rollovers
Problem
Solution
How It Works
3-18. Adding and Removing Text in Response to Events
Problem
Solution
How It Works
3-19. Displaying Word Balloons
Problem
Solution
How It Works
3-20. Creating “Return to Top” Links
Problem
Solution
How It Works
3-21. Displaying Text with an Animation Effect
Problem
Solution
How It Works
Adding a Mouseover Event
3-22. Replacing Text with a Sliding Effect
Problem
Solution
How It Works
3-23. Summary
Chapter 4: Form Validation
4-1. Confirming a Required Field Is Not Left Blank
Problem
Solution
How It Works
4-2. Validating a Numerical Field
Problem
Solution
Allowing Only Numerical Values
Allowing a Negative Value Also
Allowing a Range of Values
How It Works
4-3. Validating Phone Numbers
Problem
Solution
How It Works
4-4. Validating a User Id
Problem
Solution
How It Works
4-5. Validating a Date
Problem
Solution
How It Works
4-6. Validating an Email Address
Problem
Solution
How It Works
4-7. Checking Whether a Checkbox Is Checked or Not
Problem
Solution
Checking with the length Method
How It Works
4-8. Checking If a Radio Button Is Selected
Problem
Solution
How It Works
4-9. Checking That an Option in a Select Element is Selected
Problem
Solution
How It Works
Multiple Select
4-10. Applying Styles to Options and a Form Button
Problem
Solution
How It Works
Styling a Form Button
Creating an Image Submit Button
4-11. Checking and Unchecking All Checkboxes Together
Problem
Solution
How It Works
.attr()
.is()
4-12. Validating Two Fields
Problem
Solution
How It Works
Adding a Submit Button
4-13. Matching the Password and Confirming Password Fields
Problem
Solution
How It Works
.next()
4-14. Disabling Certain Fields
Problem
Solution
How It Works
4-15. Validating a Complete Form
Problem
Solution
How It Works
Highlighting the Input Fields and Grouping Common Form Elements
4-16. Summary
Chapter 5: Page Navigation
5-1. Writing a Breadcrumb Menu
Problem
Solution
How It Works
5-2. Adding a Hover Effect to Menu Items
Problem
Solution
How It Works
5-3. Creating a Contextual Menu
Problem
Solution
How It Works
Meaning of the jQuery Code
5-4. Creating a Navigation Menu with Access Keys
Problem
Solution
How It Works
5-5. Creating a Context Menu on Right Click
Problem
Solution
How It Works
5-6. Creating Two Menus with Separate Menu Items
Problem
Solution
How It Works
5-7. Creating Two Menus with Submenu Items
Problem
Solution
How It Works
:first
5-8. Making an Accordion Menu
Problem
Solution
How It Works
5-9. Making a Dynamic Visual Menu
Problem
Solution
How It Works
5-10. Summary
Chapter 6: Implementing Animation
6-1. Animating an Image to the Right and Then the Left
Problem
Solution
left Property
position Property
How It Works
6-2. Managing and Manipulating the jQuery Queue
Problem
Solution
slideToggle()
.queue()
How It Works
Popping the Last Function from the Queue
6-3. Showing Images One by One by Clicking the Next and Previous buttons
Problem
Solution
padding Property
overflow Property
display Property
float Property
css()
margin-left Property
How It Works
Displaying All Hidden Images One by One When Any Arrow Key Is Pressed
Making the Images Slide Continuously
6-4. Zooming In on an Image When the Mouse Hovers Over It
Problem
Solution
How It Works
6-5. Displaying Detailed Information on Clicking the “Read More” Link
Problem
Solution
event.preventDefault() Method
How It Works
6-6. Expanding and Collapsing a List Using Animation
Problem
Solution
How It Works
6-7. Summary
Chapter 7: Sliding and Visual Effects
7-1. Displaying Images, One at a Time Infinitely
Problem
Solution
position Property
slice()
next()
end()
setInterval()
appendTo()
7-2. Making a Ball Bounce
Problem
Solution
7-3. Making Images Scroll Vertically Upward Within a Box
Problem
Solution
7-4. Displaying Images Vertically, Each Replaced by the Next in Sequence
Problem
Solution
scrollTop Property
after()
7-5. Making a News Scroller
Problem
Solution
stop()
7-6. Showing Images One After the Other on Hover
Problem
Solution
How It Works
Making a Slide Show
7-7. Showing Images Pagewise
Problem
Solution
How It Works
7-8. Shuffling Images in Either Direction
Problem
Solution
How It Works
7-9. Writing a Pendulum Scroller
Problem
Solution
How It Works
7-10. Scrolling Images Using Arrays
Problem
Solution
Scrolling an Image Over Other Images
Scrolling Only the Image That Is Hovered Over
Fading Out and Replacing an Image
Scrolling One Image Left and One Image Right, and Fading Out the Middle
7-11. Summary
Chapter 8: Dealing with Tables
8-1. Hovering Over Table Rows
Problem
Solution
How It Works
8-2. Highlighting Alternate Columns
Problem
Solution
How It Works
:nth-child()
Highlighting Alternate Rows
Highlighting the Column That Is Hovered Over
.index()
Highlighting the Column Heading Also While Hovering
Highlighting Individual Cells of the Table When Hovered Over
8-3. Filtering Rows
Problem
Solution
How It Works
Hiding the Selected Row
8-4. Hiding the Selected Column
Problem
Solution
How It Works
Filtering Out Columns
How It Works
:not()
8-5. Paginating the Table
Problem
Solution
How It Works
8-6. Expanding and Collapsing List Items
Problem
Solution
How It Works
8-7. Expanding and Collapsing Rows of the Table
Problem
Solution
How It Works
Rows with Plus and Minus Icons
8-8. Sorting List Items
Problem
Solution
How It Works
8-9. Sorting a Table
Problem
Solution
Determining Which Column Heading Is Clicked
How It Works
Sorting the Table on the Basis of a Selected Column (Only in Ascending Order)
Outline Placeholder
Sorting the Table on the Basis of a Selected Column in Ascending as Well as Descending Order
How It Works
8-10. Filtering Rows from a Table
Problem
Solution
How It Works
8-11. Summary
Chapter 9: jQuery UI
9-1. Using Datepicker
Problem
Solution
Configuring Properties of the Datepicker Widget
Changing the Date Format
Applying Styles to the Datepicker
9-2. Using the Autocomplete Widget
Problem
Solution
Configuring the Autocomplete Widget
9-3. Using an Accordion
Problem
Solution
Configuring an Accordion
9-4. Using Dialogs
Problem
Solution
Options to Configure a Dialog Box
9-5. Using the Tabs Widget
Problem
Solution
Options to Configure Tabs
9-6. Summary
Chapter 10: AJAX
10-1. Returning a Single Line of Text from the Server
Problem
Solution
ajax()
10-2. Returning Multiple Lines of Text from Server
Problem
Solution
10-3. Returning a Name/Value Pair Using JSON
Problem
Solution
getJSON()
each()
arr.push()
join()
10-4. Returning a JSON Object
Problem
Solution
10-5. Returning the JSON Object That Displays Images
Problem
Solution
10-6. Converting a String to Uppercase Using AJAX
Problem
Solution
strtoupper()
10-7. Displaying the Price of the Selected Product Through an AJAX Request
Problem
Solution
10-8. Authenticating a User Using AJAX
Problem
Solution
Create Database
Show Databases
Use Statement
Create Table
SHOW TABLES Statement
SELECT Query
INSERT INTO
trim()
mysqli_connect()
die()
mysqli_query()
mysqli_num_rows ()
10-9. Validating a User Name
Problem
Solution
How It Works
10-10. Using Autocomplete
Problem
Solution
Getting Names Generated from the Database
How It Works
10-11. Importing HTML
Problem
Solution
Importing Only Desired Elements
How It Works
10-12. Getting XML Data
Problem
Solution
Displaying Roll, First Name, and Marks from an XML File
How It Works
10-13. Paginating Tables
Problem
Solution
How It Works
10-14. Summary
Chapter 11: Creating and Using jQuery Plugins
Creating a Plugin
11-1. Creating a Plugin That Changes the Font Size, Font Style, and Foreground and Background Color of an Element
Problem
Solution
11-2. Making a Plugin Chainable
11-3. Enabling Passing Customization Options to a Plugin
Problem
Solution
Modifying Content Using a Plugin
Using Plugins
11-4. Displaying Images Slider Using a Magnific Popup Plugin
Problem
Solution
11-5. Displaying Dynamic Checkboxes and Radio Buttons Using an iCheck Plugin
Problem
Solution
11-6. Creating an Image Gallery and Carousel Using a blueimp Gallery Plugin
Problem
Solution
Stretching Images
Making an Image Carousel
11-7. Validating a Form Using a jQuery Validation Plugin
Problem
Solution
11-8. Summary
Chapter 12: Using CSS
12-1. Distinguishing HTML Elements
Problem
Solution
How It Works
12-2. Applying Styles to an Element Nested Inside Another Element
Problem
Solution
How It Works
12-3. Indenting Paragraphs
Problem
Solution
How It Works
12-4. Applying an Initial Cap to a Paragraph
Problem
Solution
How It Works
12-5. Removing the Gap Between Heading and Paragraph
Problem
Solution
How It Works
12-6. Applying Styles to Heading Text
Problem
Solution
How It Works
12-7. Indenting the First Line Of Multiple Paragraphs
Problem
Solution
How It Works
12-8. Creating Paragraphs with Hanging Indents
Problem
Solution
How It Works
12-9. Creating a Bordered Pull Quote
Problem
Solution
How It Works
12-10. Creating a Pull Quote with Images
Problem
Solution
How It Works
12-11. Applying List Properties to List Items
Problem
Solution
How It Works
12-12. Applying Styles to Only Selected List Items
Problem
Solution
Applying Styles to the List Items Selected with Child Selector
Applying Styles to List Items to Which a CSS Class Is Not Applied
How It Works
12-13. Placing Dividers Between List Items
Problem
Solution
How It Works
12-14. Applying Image Markers to the List
Problem
Solution
How It Works
12-15. Creating Inline Lists
Problem
Solution
How It Works
12-16. Applying Styles to Hyperlinks and mailto
Problem
Solution
How It Works
12-17. Assigning Different Dimensions to HTML Elements
Problem
Solution
How It Works
12-18. Placing HTML Elements
Problem
Solution
Making a Two-Column Layout
Reversing the Columns
How It Works
12-19. Creating a Multicolumn Layout
Problem
Solution
Applying Floats
Increasing Gutters Size Between Columns
How It Works
12-20. Wrapping Text Around Images
Problem
Solution
How It Works
12-21. Placing a Drop Shadow Behind an Image
Problem
Solution
How It Works
12-22. Changing the Cursor When the Mouse Moves Over a Link
Problem
Solution
How It Works
12-23. Displaying a Long Piece of Text Within a Specific Area
Problem
Solution
How It Works
12-24. Making a Rounded Corner Column
Problem
Solution
How It Works
12-25. Applying Text Decorations
Problem
Solution
How It Works
12-26. Scaling Images
Problem
Solution
How It Works
12-27. Setting a Background Image
Problem
Solution
How It Works
12-28. Centering a Background Image in the Browser
Problem
Solution
How It Works
12-29. Making the Background Image Stationary
Problem
Solution
How It Works
12-30. Summary
Appendix A: Installing WampServer
A-1. Downloading WampServer
A-2. Installing WampServer
Index