Preface

Welcome to jQuery Hotshot. This book has been written to provide as much exposure to the different methods and utilities that make up jQuery as possible. You don't need to be a jQuery hotshot to read and understand the projects this book contains, but by the time you've finished the book, you should be a jQuery hotshot.

As well as learning how to use jQuery, we are also going to look at a wide range of related technologies including using some of the more recent HTML5 and related APIs, such as localStorage, how to use and create jQuery plugins, and how to use other jQuery libraries such as jQuery UI, jQuery Mobile, and jQuery templates.

jQuery has been changing the way we write JavaScript for many years. It wasn't the first JavaScript library to gain popularity and widespread usage among developers, but its powerful selector engine, cross-browser compatibility, and easy-to-use syntax quickly propelled it to be one of the most popular and widely-used JavaScript frameworks of all time.

As well as being easy-to-use and abstracting complex and powerful techniques into a simple API, jQuery is also backed by an ever-growing community of developers, and is possibly the only JavaScript library protected by a not-for-profit foundation to ensure that development of the library remains active, and that it remains open source and free for everyone for as long as it's available.

One of the best things is that anyone can get involved. You can write plugins for other developers to use in order to complete common or not-so-common tasks. You can work with the bug tracker to raise new issues, or work with the source to add features, or fix bugs and give back in the form of pull requests through Git. In short, there is something to do for everyone who wants to get involved, whatever their background or skillset.

Getting started with jQuery

Every project in this book is built around jQuery; it's the foundation for everything we do. To download a copy of jQuery, we can visit the jQuery site at http://jquery.com/. There are download buttons here to obtain production and development versions of the library, as well as a wealth of other resources including full API documentation, tutorials, and much, much more to help you familiarize yourself with using the library.

One of the core concepts of jQuery is based on selecting one or more elements from the Document Object Model (DOM) of a web page, and then operating on those elements somehow using the methods exposed by the library.

We'll look at a range of different ways of selecting elements from the page throughout the projects in the book, as well as a wide selection of the different methods we can call on elements, but let's look at a basic example now.

Let's say there is an element on a page that has an id attribute of myElement. We can select this element using its id with the following code:

jQuery("#myElement");

As you can see, we use simple CSS selectors in order to select the elements from the page that we wish to work with. These can range from simple id selectors as in this example, class selectors, or much more complex attribute selectors.

As well as using jQuery to select elements, it is also common to use the $ alias. This would be written using $ instead of jQuery, as follows:

$("#myElement");

Once the element has been selected in this way, we would say that the element is wrapped with jQuery, or that it's a jQuery object containing the element. Using the jQuery (or $) method with a selector always results in a collection of elements being returned.

If there are no elements that match the selector, the collection has a length of 0. When id selectors are used, we would expect the collection to contain a single element. There is no limit as to how many elements may be returned in the collection; it all depends on the selector used.

We can now call jQuery methods that operate on the element or elements that have been selected. One of the great features of most jQuery methods is that the same method may be used to either get a value, or set a value, depending on the arguments passed to the method.

So to continue our example where we have selected the element whose id attribute is myElement, if we wanted to find out its width in pixels, we could use jQuery's width() method:

$("#myElement").width();

This will return a number which specifies how many pixels wide the element is. However, if we wish to set the width of our element, we could pass the number of pixels that we'd like the element to have its width set to as an argument to the same method:

$("#myElement").width(500);

Of course, there is much more to using jQuery than these simple examples show, and we'll explore much more in the projects contained in this book, but this simplicity is at the heart of the library and is one of the things that have made it so popular.

What this book covers

Project 1, Sliding Puzzle, helps us build a sliding puzzle game. We'll use jQuery and jQuery UI together to produce this fun application and also look at the localStorage API.

Project 2, A Fixed Position Sidebar with Animated Scrolling, helps us implement a popular user interface feature – the fixed-position sidebar. We focus on working with the CSS of elements, animation, and event handling.

Project 3, An Interactive Google Map, teaches us how to work with Google's extensive Maps API in order to create an interactive map. We look at a range of DOM manipulation methods and look at how to use jQuery alongside other frameworks.

Project 4, A jQuery Mobile Single-page App, takes a look at the excellent jQuery Mobile framework in order to build a mobile application that combines jQuery with the Stack Exchange API. We also look at jQuery's official template engine, JsRender.

Project 5, jQuery File Uploader, uses jQuery UI once again, this time implementing a Progressbar widget as part of a dynamic front-end file uploader. We also cover writing jQuery plugins by making our uploader a configurable jQuery plugin.

Project 6, Extending Chrome with jQuery, shows us how we can extend the popular Chrome web browser with an extension built with jQuery, HTML, and CSS. Once again we make use of JsRender.

Project 7, Build Your Own jQuery, takes a look at how we can build a custom version of jQuery using a range of key web developer's tools including Node.js, Grunt.js, Git, and QUnit.

Project 8, Infinite Scrolling with jQuery, takes a look at another popular user-interface feature – infinite scrolling. We focus on jQuery's AJAX capabilities, again use JsRender, and look at the handy imagesLoaded plugin.

Project 9, A jQuery Heat Map, helps us build a jQuery-powered heat map. There are several aspects to this project including the code that captures clicks when pages are visited, and the admin console that aggregates and displays the information to the site administrator.

Project 10, A Sortable, Paged Table with Knockout.js, shows us how to build dynamic applications that keep a user interface in sync with data using jQuery together with the MVVM framework Knockout.js.

What you need for this book

Some of the projects covered in this book can be completed using nothing but a browser and a simple text editor. Of course, a complete IDE is always going to make things easier, with features such as code completion, code coloring, and collapsible blocks. So using an IDE over a simple text editor is recommended.

Other projects rely on additional JavaScript frameworks or community-built plugins. Several projects use third-party services hosted on the Internet in order to consume data. One project requires the use of several additional and highly specialized applications.

Where additional software or scripts are required, or API access is needed, these requirements are discussed in the relevant projects and information is included on where to obtain the required code or applications, how to install them, and how to use them sufficiently for the project to be completed.

Who this book is for


This book is aimed primarily at front-end developers that have some knowledge and understanding of HTML, CSS, and JavaScript. Some jQuery experience is desired, but not essential. All code, whether it be HTML, CSS, or JavaScript (including jQuery) is discussed in full to explain how it is used to complete the project.

Conventions

In this book, you will find several headings appearing frequently.

To give clear instructions of how to complete a procedure or task, we use:

Mission Briefing

This section explains what you will build, with a screenshot of the completed project.

Why Is It Awesome?

This section explains why the project is cool, unique, exciting, and interesting. It describes what advantage the project will give you.

Your Hotshot Objectives

This section explains the major tasks required to complete your project.

• Task 1

• Task 2

• Task 3

• Task 4, and so on

Mission Checklist

This section explains any prerequisites for the project, such as resources or libraries that need to be downloaded, and so on.

Task 1

This section explains the task that you will perform.

Prepare for Lift Off

This section explains any preliminary work that you may need to do before beginning work on the task.

Engage Thrusters

This section lists the steps required in order to complete the task.

Objective Complete - Mini Debriefing

This section explains how the steps performed in the previous section allow us to complete the task. This section is mandatory.

Classified Intel

The extra information in this section is relevant to the task.

You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "First of all we define a new variable called correctPieces and set its value to 0."

A block of code is set as follows:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/common.css" />
  </head>
  <body>
    <script src="js/jquery-1.9.0.min.js"></script>
  </body>
</html>

Two independent lines of code will appear as follows:

<div data-role="header">
    <a href="bounty-hunter.html" data-icon="home" 

A line of code that has overflown to the next due to space constraints would appear as follows:

        filter: "!)4k2jB7EKv1OvDDyMLKT2zyrACssKmSCXeX5DeyrzmOdRu8sC5L8d7X3ZpseW5o_nLvVAFfUSf"

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

pieces.appendTo(imgContainer).draggable("destroy");

if (timer) {
  clearInterval(timer);
  timerDisplay.text("00:00:00");
}

timer = setInterval(updateTime, 1000);
currentTime.seconds = 0;
currentTime.minutes = 0;
currentTime.hours = 0;

pieces.draggable({

Any command-line input or output is written as follows:

cd C:\\msysgit\\msysgit\\share\\msysGit

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Clicking on the Next button moves you to the next screen".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[e-mail]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[e-mail]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[e-mail]> if you are having a problem with any aspect of the book, and we will do our best to address it.