jQuery Hotshot

Table of Contents

• Preface

• Project One: 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

• Project Two: 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

• Project Three: 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

• Project Four: 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

• Project Five: 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

• Project Six: 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

• Project Seven: 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

• Project Eight: 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

• Project Nine: 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

• Project Ten: 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

• Index