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