Delphinidin

qTip is a jQuery plug-in that allows you to easily set up advanced tooltips on any element. The tooltips can contain both static and dynamic content. qTip has many features that make it an extremely attractive and lightweight plug-in such as cross-browser compatibility with IE, Firefox, Safari, Opera, and Chrome. On those browsers that aren't supported, the tooltip degrades gracefully. qTip can be applied to any element on the page, including paragraph tags.

If you have ever purchased something online, you probably had to fill out a form by entering your billing address and shipping address. For most consumers, this information is the same, so such forms often have a Same As Billing Address check box that says “same as billing" that copies over all the form fields from billing to shipping, preventing the customer from needing to re-enter all of that information. This check box uses a copy field functionality. Not only does it save the customer time, but also reduces the likelihood of them mis-entering data. An example of a copy field check box on the checkout page of Best Buy's Web site (www.bestbuy.com).

E-mail validation is critical for a newsletter sign-up on a Web site. If users submit a bad e-mail address, it can cost you time and money to get it cleaned out your database. Using jQuery, you can set up simple e-mail validation on a form without having to write a lot of code. This sort of script can be useful on a Web site, such as the Laithwaites Wine special off er email sign-up form, where you don't need to validate multiple fields with different types data requiring advanced validation. I demonstrate advanced validation using a popular jQuery validation plug-in at the end of this chapter. It's important to remember that you should never rely solely on client-side JavaScript validation; server-side validation should always be present if client-side is not available.

Using jQuery to retrieve the value from a select option is also simple to set up, yet can be very useful in any type of Web site or application. An example of this functionality can be seen on Crutchfield.com, a car and home audio electronics Web site, in the Outfit Your Car section. Crutchfield allows you to select your car year, model, and make — each time you make a selection, the value of the select option a retrieved and then used to display another option with list items that are filtered by the previous select.

Retrieving the value of an input is a very basic form technique and is useful in many situations. It's incredibly easy to set up and can be used for a number of applications. I commonly use this technique when submitting forms using Ajax when I need to pass over the values from all of the form fields.

You can use jQuery to programmatically select and deselect all of the check boxes on a Web page, a technique that is often used with a preferences section on a Web site. The user sees 20 or so check boxes and a link that lets them select all of the check boxes with a single click. The following tutorial shows you how you can set up a Check All Check Boxes link using the jQuery click event and conditional logic.

Being able to limit a character count on an input field can be used to restrict how many words are included or how many characters you can include in your status message. The 140-character limit on Twitter (www.twitter.com) has made the limiting character count type of script quite popular in the past year, but it's still always a challenge to keep your message or thought under 140 characters. A character count limit can also display to the user how many characters they have left to work with under the limit.

Setting default text on form fields helps to instruct users on what needs to be entered into the fields. Many Web designers use the default text as form input labels to help save space or change up the design of the forms. You can set a default value using the value attribute, but the problem is that if a user clicks into the field, they need to delete what is currently there. The Laithwaites Wine Web site (www.laithwaiteswine.com) has a simple implementation of this: their e-mail newsletter signup field at the bottom left corner of the Web page.

In larger forms, you can help users keep track of where they are by highlighting which field they are currently on. Most browsers have built-in events that highlight the current field, such as the Firefox. You can set up a secondary highlight using CSS and the jQuery focus event. By adding a custom highlight, you can ensure that users know how far along they are in any given form. Using CSS, you can add a highlight as shown on the contact form example from Wufoo (www.wufoo.com).

Forms are commonplace all over the Internet, whether they are forms for ecommerce and registration or search input fields. Validation ensures that Web forms accept correct data, show clear error messages when faulty data is entered, and that fields are filled out when a form is submitted. Validation is often handled on the server side by Web developers using programming languages such as PHP, JSP or ASP. Validation on the client side using JavaScript is becoming increasingly more common, in addition to server-side validation depending on the security level of the data that is being validated. Web designers who know jQuery and JavaScript can create a better user interface with forms than can a developer using backend development. jQuery offers several events (focus, blur, change) specifically to be used in forms, which I review in post before, about events. These events are not new to JavaScript, but jQuery makes it easier to use these events in conjunction with forms. In this chapter, I review many different scenarios where jQuery can help you do more with your forms. The techniques that you learn from this chapter are necessary when you work with Ajax.

Interactive graphs are most often creating using Adobe Flash for dynamic graphs, such as those seen in Google Analytics. Recently, a number of developers have created jQuery plug-ins that can create comparable charts but without the dependency of Flash. The Visualize plug-in, created by Filament Group, is one of the better solutions for creating charts. The Visualize plug-in allows you to create graph, line, bar, and pie charts using tabular data. It has a number of options that can be passed into the function to set up and alter a chart on any page using data pulled from HTML tables.

jQuery has an extensive community of developers who create jQuery plug-ins. The only downside to having so many options to choose from is that sometimes the quality of code and support for a plug-in is lacking. You can usually tell a good plug-in from a bad one by the documentation that accompanies it. You can build your own jQuery code to do table sorting and filtering, but quite a few powerful plug-ins can also do this. Using a plug-in can rapidly speed the implementation of a solution, and because most plug-ins are open source, it gives you a good base to get started upon. I review how to work with two plug-ins in particular: tablesorter and Visualize.

Pagination involves breaking up content into manageable page-sized pieces. On the Web, pagination is everywhere; like pagination on the Google search results page. Pagination helps to limit the number of results shown at one time to make it easier for users to navigate and digest the content delivered to them.

- Adding a Row After a Row Based on Its Index Value
Just as you add a row based on its position in the table as first or last, you can also insert a row based on the index value of the row proceeding or following it. Set up a selector that selects all elements that have an index of 5 using the :eq() filter and insert the Special Offer TODAY HTML content directly after the matched element.

Now that you have seen how to add simple styling and effects to tables, I’m going to show you how to manipulate the data that is in the tables. When I say manipulate, I mean add, remove, and filter the data contained, which results in changes to the DOM. All of the selectors, events, and effects that I have discussed up until now can be applied to tabular data. The possibilities of what you can do are endless. In this section, I explain the following solutions:

In the late nineties, during the explosive growth of the Internet and the World Wide Web, tables were oft en used for page design and layouts, which is not what they were originally intended for. The problem with using tables for design and layout stems from their lack of support for semantic principles, where content is separated from design, and the usage of nested tables, which add unnecessary page bloat to your code and lead to an accessibility and maintainability nightmare. Nested tables occur when you create a page layout with table upon table nested into each other to match up to a complex design. Most Web designers and developers are now able to work purely with HTML and CSS to create semantic designs that no longer use tables for layout and therefore separate the content from the presentation layers. HTML tables were used improperly because alternative layout options did not exist until the advent of CSS — even then, browsers didn't support CSS correctly for quite a few years. Tables have a really bad reputation, but if they're used correctly for tabular data, they can be quite useful for showing data in a clean, structured format. In the following chapter, I share some ways to enhance your tabular data using jQuery.

- Adding Alternating Row Colors Using Filters
Zebra striping is a common practice used by Web designers to make table rows easier to read by adding a background color to each even or odd row, an example of zebra striping from the Web site for Performable (www.performable.com). Zebra striping can be done using backend programming languages such as PHP or ASP.net, but the downside is that a developer must be involved. The :even and :odd filters in jQuery make it incredibly easy to add this styling to any table. Set up a document ready function and, within it, add two statements to select the odd and even rows using filters. The first statement selects all of the even rows and applies the CSS property background:#dedede (light gray). The second statement is just to ensure that all of the odd rows have a background of white.

Users must always know where they are within a Web site and where they are visually on the navigation menu. This basic user interface requirement can be overlooked and often is. I have seen few solutions in jQuery or JavaScript for this issue — most solutions often involve backend programming using PHP, JSP, or ASP. The following tutorial guides you through how to set up active menu items on your Web site's navigation menu using jQuery. The jQuery script is set up to determine the selected element in the menu based on the address in the URL.

One of the more attractive features of jQuery is being able to select many elements at once and change some part of the selected elements. You may run into a situation on a page where you need to quickly change all of the hyperlinks to open in a new window, but you don't have access to the source code. The code is being generated dynamically in a PHP, JSP (Java Server Pages), or ASP (Active Server Pages) file somewhere and you can't access it.

The jQuery Easing plug-in provided by GSGD (http://gsgd.co.uk/sandbox/ jquery/easing/) allows you to add 30 diff erent types of easing effects to your Web site. The animate method already has two easing effects — swing and liner, but they're very limited — to be able to create more realistic easing effects such as bounce and elastic effects, it's best to use a plug-in. Easing controls an animation by accelerating or decelerating the rate at which it falls into place, commonly seen as an animation snapping into place. Easing gives animation a more realistic effect.

By now, you should be pretty familiar with the concept of chaining in jQuery. Chaining allows you to add multiple methods to the same statement. This helps to keep your amount of code smaller and increases the performance of your scripts. In the following example, I use chaining to illustrate how you can add multiple methods to a selector statement. The tooltip is first set to hidden, and then the element is faded in at a speed of 900 milliseconds. A one-second delay occurs, and then it fades out at a rate of 900 milliseconds.