Monthly Archives: September 2010

jQuery Recipes

Home

Author(s): Bintu Harwani.
ISBN: 1430227095
Published: Jan 2010
Relevance: 4/5
Readability: 5/5
Overall: 4/5

More Apress Books Reviews …

This book provides a comfortable way to learn from the scratch jQuery through many useful and practical recipes with its respective explanation and a lot of images to show you what you should expect. The content is a good basis for beginners and useful for reference to medium of developers. Below the TOC of this book:

  • Chapter 01: jQuery Basis
  • Chapter 02: Arrays and Strings
  • Chapter 03: Event Handling
  • Chapter 04: Form Validation
  • Chapter 05: Page Navigation
  • Chapter 06: Visual Effects
  • Chapter 07: Dealing with Tables
  • Chapter 08: Ajax
  • Chapter 09: Using Plugins
  • Chapter 10: Using CSS

Just recall that the book’s title is jQuery Recipes: A Problem-Solution Approach, therefore write a long review for each chapter is no easy since is based about Problem-Solution Approach, then I going to give you an overview idea about what you should expect for each chapter, be aware too that practically each section has its respective images about output results.

Now an expanded summary for each chapter

Chapter 01: jQuery Basis

If you are beginner, this chapter is mandatory to start and if you have some experience, this chapter is useful to refresh your knowledge, The chapter start quickly with Installing instructions, very easy, following with selecting Nodes in DOM where the author shown us many types of selections with its respective explanation, the author explain too us why he use $(document).ready(…), this is covered in Delaying the Execution of JavaScript. The follow section is very important because it going to be used many times throughout the book, Applying CSS to elements working with the addClass() method, other variation for this section is Selecting a Non-Standard Series of HTML Elements, very interesting, working for example with odd(),even(),eq(),contains() methods. The follow section is about how to work with nodes, many important methods are covered like children(), each(), text(), following with Obtaining the HTML of an Element working with the html() method, a variation of this section is Changing the Content of a DOM Node working closely with text() and html() methods, you can see clearly the difference between them. The follow section is important for dynamic purposes, is Creating a DOM Node on the fly working with many methods like prepend(), prependTo(), clone(), you can see the differences about them. The Last section is about Assigning the same class name to different HTML Elements and Applying Styles to Them. All the samples code for this chapter are very easy to understand.

Chapter 02: Arrays and Strings

Starting quickly with Displaying Names in a List Using Arrays, working with join() method together with text() and html() methods, covering too about positions and arrays’ length. The follow section is about Manipulating Arrays Elements working with the methods map(), return(), toUpperCase(). Following with Filtering Arrays to Show Desired Data Only working with the methods grep() (explaining each parameter for this method), and match(), more interesting yet because he introduces Regex applying a good amount of examples with its respective explanation. The follow section is Sorting String and Numerical Arrays working with the sort() method and some particular customized options within it, some samples variation available, following with Splitting an Array working with the splice() method, the opposite of this is Combining Arrays working with the concact() method. Final sections are Creating an Array of Objects and Sorting an Array of Objects. It would useful if we work with JSON.

Chapter 03: Event Handling

A long and important chapter, where in many sections CSS is used a lot, the chapter start with the section Finding Out Which Button Is Clicked working with an interesting method, bind(), used to apply a particular event (this case click) to many buttons in one sentence, the other approach is use directly the click() method, dblclick() method is used too, and for both working with event.target attribute, before to change the section explanation for each parameter for the bind() method is available, same approach of explanation expansion about click() and dblclick() methods is available too.

The follow section is Triggering Events Automatically which cover the trigger() method, following with some useful Disabling A Button After it is clicked once working with the opposite of the bind() method, which is unbind() method, the author explain the three variations of unbind() method including its parameters, the follow section is Handling Mouse Events covering many useful events with the follow methods mouseup(), mouseover(), mousedown() and mouseout(), some useful is too the section Finding Out which mouse Button is pressed, it is based reusing the mousedown() method but now working with the attribute event.button other section using such attribute is about the screen coordinates working with the attributes event.screenX and event.screenY.

The follow section is Highlighting Text Dynamically working with the methods css() and mouseover(), really JQuery does the work easy, the follow section reuse again the css() method to making an image Bright and Blurred.

The follow section is useful, about Finding When an Element Gains and Loses Focus, working with the methods focus() and blur(), both includes their respective explanation, we turn to the section Applying Hover Effects on Buttons working with the methods hover() and addClass(), follow section is about Toggling the Application of a CSS class working with two methods toggleClass() and toggle(). After this section Creating Image-Based Rollovers is covered too working with the methods hover(), addClass(), removeClass(), working with three images and the CSS property background-image:url.

Other section available is Adding and Removing Text in Responses to Events working with the methods click(), prepend(), remove(), a variation is the follow section called Applying Styles in Response to Events working with the methods hover(), bind(), addClass() and removeClass(). The follow section is Displaying Word Balloons working with the methods hover(), addClass() and removeClass(), here we depend of an image referenced through the CSS property background-image:url to give the desired effect, other section available is Creating ‘Return to Top’ Links working with insertAfter() and prependTo() methods, which insert links and an anchor element respectively. The follow section is Offering ‘Read More…’ links working now with two new methods, show() and hide() with click(), explanation for these methods are available too, an inverse logic of this code is available like Reading Less, even more Applying Animation effects are include it too working with the methods fadeIn() and fadeOut().

The follow section is Displaying Text with an Animation Efect working with the methods hide(), show(), click() and mouseover(), a variation is the section Replacing Text with a Slidding Effect working now with two new methods slideUp() and slideDown(). The follow section is about working with images, called Making an Image Scroll working with new methods like animate(), fadeTo() and slideUp(), explanation for each parameter for animate() method is available.

The follow section is very useful, Determining Which Key was pressed working with the follow new methods keypress(), keydown(), keyup() and the attribute event.keyCode. The follow section is Preventing Event Bubbling where an example with nested elements is used, the author show two codes with and without stopping event bubbling, you can see clearly the difference. The last section is Chaining Multiple Activities, it is based like chaining call methods, for example children().clone().prependTo(), other methods used are end().

Is a long chapter, right?

Chapter 04: Form Validation

An important chapter of course, be aware that the first code is reused practically for the follow sections, based mostly in a simple Form element containing a text input and a submit button, and CSS style to highlight errors, about the jQuery code among other things it is very closely about the logic applied, therefore you can learn and advance very quickly.

OK, we start with the section Confirming a Required Field is Not Left Blank which use some new methods like val(), length(), preventDefault() and hide(). Once understood this section we follow with the section Validating a Numerical Field which use a simple for cycle and evaluating each character, a variation of this is Allowing Negative Values and Allowing A Range of Values, I think that the author should did use Regex for validation purposes since iterating each character has no sense.

The follow section is Validating Phone Numbers, now the author use Regex and use the test() method, other variation of this section is Validatin a User ID, the follow section is useful, is about Validating a Date again working with Regex, explanation of the regex pattern is explained in case the reader are not very familiarized with ReGex. The follow section covered is Validating an Email Address, again a long explanation about the pattern used.

Now we turn to other kind of validation, following with the section Checking Whether a Checkbox Is Checked working with the find() method and others, other variation of this solution is with the length method, to be honest, these code looks some complex, I mean many lines are used, other variation is the section Checking Whether a Radio Button Is Selected.

The follow type of validation section is Checking Whether an Option in a Select Element Is Selected working with these sentences $(‘select option:selected’).val() and $(‘select option:selected’).text(), a variation of this code is used if we use the attribute multiple in the Select Element. The follow section is Applying Styles to Options and a Form Button based with many CSS rules, a variation of this is Creating an Image Submit Button.

Now we turn to the section Checking and Unchecking All Checkboxes Together, the code seems little complex in a first glance, here the find(), attr() and is() methods are used. The follow section is Validating Two Fields working with the methods each(), parent(), show() and find(), a little variation of this is Adding a Submit Button. Now something related with the previous section is Matching the Password and Confirm Password Fields, but here we use a new method, next().

The follow section is Disabling Certain Fields where here we use the methods blur(), next(), show(), removeAttr() and the most important, the attr() method used in this way attr(‘disabled’, true). The follow section is Validating a Complete Form almost three pages of jQuery code and its respective explanation in almost two pages, you can guess that we are putting all we have learned together, then a variation of this is Highlighting the Input Fields and Grouping Common Form Elements based practically in four pages of code.

The last section is Serializing Form Data working here with the serialize() method, in the output you can see the result, is like the URL when you work with the GET method when you send data to the server, you can see the pair of names and values, I can’t see the reason to do this in a real application, it should be private or protected, anyway a variation is Serializing the Checkboxes, Radio Button, to end the chapter a last variation is Using the serializeArray() method, where JSON structure data is mentioned.

Chapter 05: Page Navigation

This chapter would not be mandatory to read for Web Programmers Developers, the target audience is more for Web designers if the term fit well, but to be honest, consider use these recipes instead of a Web/designer tool seems little illogic, but always is good know how do this from the scratch.

Here I only will display the inner section’s list covered, the methods used for the follow recipes are many we have seen before, be aware this chapter use a lot CSS rules and working with ul li elements.

  • Writing a Breadcrumb Menu
  • Adding a Hover Effect to Menus Items
  • Creating a Contextual Menu
  • Creating a Navigation Menu with Access Keys
  • Creating a Context Menu on Right-Click
  • Creating Two Menus with Separate Menu Items
  • Creating Two Menus With SubMenus Items
  • Making an Accordion Menu
  • Making a Dymanic Visual Menu

Chapter 06: Visual Effects

I have same the opinion of this chapter like the previous, the target audience is more for Web designers. Again this chapter use a lot CSS rules working closely with properties like position, margin, width, height, overflow, bottom, some methods like css(), animate(),animator(), setTimeout(), fadeIn(), fadeOut(), hover(), find(), about the HTML side we work with images.

Well all these properties and methods are very closely related among them about work to cover the follow sections.

  • Displaying Images Horizontally and Vertically
  • Creating a Horizontal Image Slider
  • Displaying an Image that Scrolls Left and Becomes Invisible When Clicked
  • Creating an Image that Scrolls Left, Disappears, and Reappears at the Right
  • Scrolling an Image at the Center of the Browser Window
  • Showing Images One After the Other on Hover
  • Scrolling an Image Vertically
  • Scrolling an Image Horizontally
  • Making a News Scroller
  • Displaying an Enlarged Image on Mouseover
  • Showing Images Pagewise
  • Shuffing Images in Either Direction
  • Writing a Pendulum Scroller
  • Scrolling Images Using Arrays

Some sections has some variations, a good amount of code, if you are a Web designer, you can useful this chapter like reference if you want work from the scratch, I mean without a Web tool.

Chapter 07: Dealing with Tables

An important chapter, starting with the section Highlighting a Table Row on Hover, after to includes a Table element the author use the methods hover(), addClass(), removeClass() and an important method very useful, which is find(). After this the follow section is Highlighting Alternate Columns here we have a new important method, nth-child(), explaining possible parameters like even and odd from this first code many useful variations are available too like:

  • Highlighting Alternate rows
  • Highlighting the column that is Hovered On
  • Highlighting the Column Heading While Hovering
  • Highlighting Individual Cells Of the Table when Hovered On

Some of these use other chaining methods like parent().children(). The logic used among them are not very different, therefore you can understand these variations very quickly.

The follow section is Filtering Rows using the methods find(), hide() and show(), a variation of this code is Hiding the Selected Row, now we turn to the section Hiding the Selected Column which work with the methods parent(), children(), index(), nth-child(), a variation of this is Filtering out Columns which uses a new method, which is not().

The follow section is Paginating a Table here maths logic is applied, you must read the explanation of the code used together with the maths logic applied for a better understanding, even the author includes an alternate solution. We follow with Expanding and Collapsing List Items using many times the follow methods children(), show(), hide() and is(), working with images in list-style-image:url.

Now we turn to Expanding and Collapsing Table Rows working with chaining methods like find().parent().show() and parent().children().index(), a wise variation for this section is Rows with + and – Icons , the code seems be complex in a first glance, but it not. The follow section is useful many times, is about Sorting List Items working closely with comparator’s logic. Then a variation of this is the section Sorting a table which this section is divided under the follow sequence for a better understanding.

  • Determining wich column heading is Clicked
  • Sorting a column in Ascending Order
  • Sorting a column in both Ascending and Descending Order

Well quality of code used, little long but well covered

The last section is Filtering Rows from a Table which depends of a text input where after to write some character and press a submit button the filtering row process happen, code work with the each() method and a simple comparator of contents.

Chapter 08: Ajax

We start with the section Displaying a Welcome Message working with a Form element, text input and a submit button, about the jQuery code, the important method is ajax(), where the author explain us each parameter for it, the author work with GET/POST HTTP request, but in two ways, the first based with the ajax() type parameter and the second with the methods get() and post().

We follow with Performing Authentication which is a variation of the previous section, working now with two text inputs. Be aware for the server side we work with PHP, we have two variations Validating a User Name and Validating an Email Address both working with Regex in the server side, a well explanation for the email’s pattern is available.

We turn to a useful recipe, Using Auto Complete working with CSS to generate a list expanded, and a simple text input element and the keyup() method and a special logic used for the ajax() success parameter, the data which comes from the PHP server side now work with MySQL. We follow with Importing HTML which use the load() method, even we can import desired elements, explanation for each parameter is available too.

An important section is Getting JSON Data working here again with the ajax() method but with the addition of a new parameter, datatype, in the previous examples was data, the author use too other approach, working with getJSON() method, explaining each parameter. We turn now with Getting XML data again working with the datatype parameter, even the author offer a little variation to work with specifics tags in the XML file, working with the find() method.

The follow section is Paginating tables the logic is almost the same used before in chapter seven but now working with ajax() method and MySQL.

Chapter 09: Using Plugins

It is related with the URL http://plugins.jquery.com/, where in this chapter the author introduces some plugins chosen about his criteria, therefore below the sections and plugins used:

  • Filtering on any column of a table with a limit on rows (DataTables)
  • Annotating an image with comments (jQuery Image Annotations)
  • Dragging and dropping table rows (Table Drag and Drop jQuery)
  • Getting, serializing and clearing form controls (Form plugin)
  • Submitting the Form via Ajax (Form plugin, yes it is used again)
  • Finding the exact position and dimension of an element (Dimension)
  • Displaying images in a carousel (3D Image carousel)
  • Selecting a Date with a Datepicker (Datepicker)
  • Sorting tables (Tablesorter)

Chapter 10: Using CSS

Practically all the chapters work closely with CSS, this chapter is dedicated to work with jQuery and CSS closely together, well covered and explained this material, you going to find a lot of methods in action as well many CSS properties and rules through the follow sections:

  • Distinguishing HTML Elements
  • Applying Styles to an Element Nested Inside another Element
  • Indenting Paragraphs
  • Applying an Initial Cap to a Paragraph
  • Removing the Gap between Heading and Paragraph
  • Applying Styles to Heading Text
  • Indenting the Firt Line of Multiples Paragraphs
  • Creating Paragraphs with Hanging Indents
  • Creating a Bordered Pull Quote
  • Creating a Pull Quote with Images
  • Applying List Properties to List Items
  • Applying Styles to Only Selected List Items
  • Placing Dividers between List Items
  • Applying Image Markers to the List
  • Creating InLine List
  • Applying Styles to Hyperlinks
  • Assigning different dimension to HTML Elements
  • Placing HTML Elements
  • Creating a Multicolumn Layout
  • Wrapping Text around Images
  • Placing a Drop Shadow behind an Image
  • Changing the Cursor when the Mouse Moves over a Link
  • Displaying a Long Piece of text within a Specific Area
  • Making a Rounded-Corner Column
  • Applying Text Decorations
  • Scaling Images
  • Setting a Background Image
  • Centering a Background Image in the Browser
  • Making the Background Image Stationary

Home

More Apress Books Reviews …