Free Sample
+ Collection

jQuery HOTSHOT

Progressing
Dan Wellman

Ten practical projects that exercise your skill, build your confidence, and help you master jQuery
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849519106
Paperback296 pages

About This Book

  • See how many of jQuery's methods and properties are used in real situations. Covers jQuery 1.9.
  • Learn to build jQuery from source files, write jQuery plugins, and use jQuery UI and jQuery Mobile.
  • Familiarise yourself with the latest related technologies like HTML5, CSS3, and frameworks like Knockout.js.

 

Who This Book Is For

This book is aimed primarily at front-end developers, preferably already with a little jQuery experience, or those people that simply want to build on their existing skills with jQuery.

Table of Contents

Chapter 1: Sliding Puzzle
Mission Briefing
Laying down the underlying HTML
Creating a code wrapper and defining variables
Splitting an image into pieces
Shuffling the puzzle pieces
Making the puzzle pieces draggable
Starting and stopping the timer
Determining if the puzzle has been solved
Remembering best times and adding some final styling
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 2: A Fixed Position Sidebar with Animated Scrolling
Mission Briefing
Building a suitable demo page
Storing the initial position of the fixed element
Detecting when the page has scrolled
Handling browser window resizes
Automating scrolling
Restoring the browser's back button
Handling the hash fragment on page load
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 3: An Interactive Google Map
Mission Briefing
Creating the page and interface
Initializing the map
Showing the company HQ with a custom overlay
Capturing clicks on the map
Updating the UI with the start and end locations
Handling marker repositions
Factoring in weights
Displaying the projected distance and cost
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 4: A jQuery Mobile Single-page App
Mission Briefing
Building the welcome page
Adding a second page
Creating the script wrapper
Getting some bounties
Adding a JsRender template
Building the list view
Building an item view
Handling paging
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 5: jQuery File Uploader
Mission Briefing
Creating the page and plugin wrapper
Generating the underlying markup
Adding event handlers for receiving files to upload
Displaying the list of selected files
Removing files from the upload list
Adding a jQuery UI progress indicator
Uploading the selected files
Reporting success and tidying up
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 6: Extending Chrome with jQuery
Mission Briefing
Setting up the basic extension structure
Adding a manifest and installing the extension
Adding a sandboxed JsRender template
Posting a message to the sandbox
Adding a content script
Scraping the page for microdata
Adding a mechanism for saving the microdata
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 7: Build Your Own jQuery
Mission Briefing
Installing Git and Make
Installing Node.js
Installing Grunt.js
Configuring the environment
Building a custom jQuery
Running unit tests with QUnit
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 8: Infinite Scrolling with jQuery
Mission Briefing
Preparing the underlying page
Getting the initial feeds
Displaying the initial set of results
Handling scrolling to the bottom of the page
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 9: A jQuery Heat Map
Mission Briefing
Determining and saving the environment
Capturing visitor clicks
Saving the click data
Adding the management console
Requesting click data
Displaying a heat map
Allowing different layouts to be selected
Showing heat maps for each layout
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge
Chapter 10: A Sortable, Paged Table with Knockout.js
Mission Briefing
Rendering the initial table
Sorting the table
Setting the page size
Adding Previous and Next Links
Adding numerical page links
Managing class names
Resetting the page
Filtering the table
Mission Accomplished
You Ready To Go Gung HO? A Hotshot Challenge

What You Will Learn

  • Learn how to use the latest version of jQuery (1.9) in real-world situations
  • Create a jQuery plugin structured for organisation and maintainability
  • Construct a custom version of jQuery using Node.js and Grunt.js, and learn how to run unit tests using qUnit
  • Build on top of online services like Google Maps to create interactive interfaces
  • Use templating frameworks to easily and efficiently create repetitive areas of the page populated with data
  • Get started with the related jQuery-powered frameworks jQuery UI and jQuery Mobile
  • Produce interactive interfaces that respond to user interactions using the Model-View-View Model framework Knockout.js
  • Use the latest web standards like HTML5 and CSS3 to create attractive and semantic web pages

 

In Detail

jQuery is used by millions of people to write JavaScript more easily and more quickly. It has become the standard tool for web developers and designers to add dynamic, interactive elements to their sites, smoothing out browser inconsistencies and reducing costly development time.

jQuery Hotshot walks you step by step through 10 projects designed to familiarise you with the jQuery library and related technologies. Each project focuses on a particular subject or section of the API, but also looks at something related, like jQuery's official templates, or an HTML5 feature like localStorage. Build your knowledge of jQuery and related technologies.

Learn a large swathe of the API, up to and including jQuery 1.9, by completing the ten individual projects covered in the book.

Some of the projects that we'll work through over the course of this book include a drag-and-drop puzzle game, a browser extension, a multi-file drag-and-drop uploader, an infinite scroller, a sortable table, and a heat map.

Learn which jQuery methods and techniques to use in which situations with jQuery Hotshots.

Authors

Read More