Cover image for jQuery HOTSHOT

jQuery HOTSHOT

Author Dan Wellman
Release Date: 2013/03/01
ISBN: 9781849519106
Topic:
0%
119
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Ten practical projects that exercise your skill, build your confidence, and help you master jQuery

  • 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.

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.

Table of Contents

  1. jQuery HOTSHOT
    1. Table of Contents
    2. jQuery HOTSHOT
    3. Credits
    4. Foreword
    5. About the Author
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    8. Preface
      1. Getting started with jQuery
      2. What this book covers
      3. What you need for this book
      4. Who this book is for

      5. Conventions
        1. Mission Briefing
        2. Why Is It Awesome?
        3. Your Hotshot Objectives
        4. Mission Checklist
        5. Task 1
        6. Prepare for Lift Off
        7. Engage Thrusters
        8. Objective Complete - Mini Debriefing
        9. Classified Intel
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Sliding Puzzle
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Laying down the underlying HTML
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      3. Creating a code wrapper and defining variables
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      4. Splitting an image into pieces
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      5. Shuffling the puzzle pieces
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
          1. Adding an event handler to the button using on()
          2. Shuffling the pieces
          3. Positioning the pieces
          4. Positioning the empty space
      6. Making the puzzle pieces draggable
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
          1. When the drag begins
          2. During the drag
          3. When the drag ends
      7. Starting and stopping the timer
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      8. Determining if the puzzle has been solved
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      9. Remembering best times and adding some final styling
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      10. Mission Accomplished
      11. You Ready To Go Gung HO? A Hotshot Challenge
    10. 2. A Fixed Position Sidebar with Animated Scrolling
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
      2. Building a suitable demo page
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Storing the initial position of the fixed element
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      4. Detecting when the page has scrolled
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      5. Handling browser window resizes
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      6. Automating scrolling
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      7. Restoring the browser's back button
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      8. Handling the hash fragment on page load
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      9. Mission Accomplished
      10. You Ready To Go Gung HO? A Hotshot Challenge
    11. 3. An Interactive Google Map
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Creating the page and interface
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      3. Initializing the map
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      4. Showing the company HQ with a custom overlay
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      5. Capturing clicks on the map
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      6. Updating the UI with the start and end locations
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      7. Handling marker repositions
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      8. Factoring in weights
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      9. Displaying the projected distance and cost
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      10. Mission Accomplished
      11. You Ready To Go Gung HO? A Hotshot Challenge
    12. 4. A jQuery Mobile Single-page App
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Building the welcome page
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Adding a second page
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      4. Creating the script wrapper
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      5. Getting some bounties
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      6. Adding a JsRender template
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      7. Building the list view
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      8. Building an item view
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      9. Handling paging
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      10. Mission Accomplished
      11. You Ready To Go Gung HO? A Hotshot Challenge
    13. 5. jQuery File Uploader
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Creating the page and plugin wrapper
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Generating the underlying markup
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      4. Adding event handlers for receiving files to upload
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      5. Displaying the list of selected files
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      6. Removing files from the upload list
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      7. Adding a jQuery UI progress indicator
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      8. Uploading the selected files
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      9. Reporting success and tidying up
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      10. Mission Accomplished
      11. You Ready To Go Gung HO? A Hotshot Challenge
    14. 6. Extending Chrome with jQuery
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
      2. Setting up the basic extension structure
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Adding a manifest and installing the extension
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      4. Adding a sandboxed JsRender template
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      5. Posting a message to the sandbox
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      6. Adding a content script
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      7. Scraping the page for microdata
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      8. Adding a mechanism for saving the microdata
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
          1. Adding the communication module
          2. Updating the content script
          3. Adding the simple styling
        4. Classified Intel
      9. Mission Accomplished
      10. You Ready To Go Gung HO? A Hotshot Challenge
    15. 7. Build Your Own jQuery
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Installing Git and Make
        1. Prepare for Lift Off
          1. Mac developers
          2. Windows developers
        2. Engage Thrusters
          1. Mac developers
          2. Windows developers
          3. Post-installation tasks
        3. Objective Complete - Mini Debriefing
      3. Installing Node.js
        1. Prepare for Lift Off
        2. Engage Thrusters
          1. Mac
          2. Windows
        3. Objective Complete - Mini Debriefing
      4. Installing Grunt.js
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      5. Configuring the environment
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      6. Building a custom jQuery
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      7. Running unit tests with QUnit
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      8. Mission Accomplished
      9. You Ready To Go Gung HO? A Hotshot Challenge
    16. 8. Infinite Scrolling with jQuery
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Preparing the underlying page
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Getting the initial feeds
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
      4. Displaying the initial set of results
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      5. Handling scrolling to the bottom of the page
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      6. Mission Accomplished
      7. You Ready To Go Gung HO? A Hotshot Challenge
    17. 9. A jQuery Heat Map
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Determining and saving the environment
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Capturing visitor clicks
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      4. Saving the click data
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      5. Adding the management console
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      6. Requesting click data
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      7. Displaying a heat map
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      8. Allowing different layouts to be selected
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      9. Showing heat maps for each layout
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      10. Mission Accomplished
      11. You Ready To Go Gung HO? A Hotshot Challenge
    18. 10. A Sortable, Paged Table with Knockout.js
      1. Mission Briefing
        1. Why Is It Awesome?
        2. Your Hotshot Objectives
        3. Mission Checklist
      2. Rendering the initial table
        1. Prepare for Lift Off
        2. Engage Thrusters
        3. Objective Complete - Mini Debriefing
        4. Classified Intel
      3. Sorting the table
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
          1. Sorting the data
          2. observableArray
          3. Comparing different value types
          4. Checking the order
          5. Adding icons
      4. Setting the page size
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      5. Adding Previous and Next Links
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      6. Adding numerical page links
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
        3. Classified Intel
      7. Managing class names
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      8. Resetting the page
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
      9. Filtering the table
        1. Engage Thrusters
        2. Objective Complete - Mini Debriefing
          1. Populating the states array
          2. Building the <select> box
          3. Filtering the data
      10. Mission Accomplished
      11. You Ready To Go Gung HO? A Hotshot Challenge
    19. Index
18.224.246.203