5 JavaScript Tricks Made Easy with jQuery

jQuery JavaScript Samples by Brian Reindel

The following five examples were built using the jQuery 1.1.3.1 JavaScript library.
The code is simple, efficient, and demonstrates the power of jQuery.

[ Please view the source in order to copy the JavaScript. ]

1.) Form Field Value Swap

This example is for when you need several form input text fields to have default values, but would like to remove those values on mouse focus. You want to put the default value back in the field if nothing was entered, or leave a value that was entered intentionally.

2.) Characters Remaining Countdown

This example is for when you have several form textarea fields, and you need each of them to count down (decrement) the number of characters remaining. All that is necessary is two class names, two simple regular expressions, and then jQuery does much of the heavy lifting.

3.) Simply Centered Informational DIV Popup

This example is for when you need a simple DIV centered as a popup. There is nothing fancy about it, but in normal circumstances the code to do this would be triple the size without jQuery. The content comes from a sibling span tag, so if JavaScript is turned off, then you still get your information.

MySQL Database
MySQL is the world's most popular open-source database. With our starter hosting plan you receive unlimited MySQL databases.

Ruby on Rails
Ruby on Rails is an open-source web framework that's optimized for programmer happiness and sustainable productivity.

4.) Collapsing Table Columns

This example is for when you have numerous columns of data and would like to give the user the option to collapse them, as well as the ability to reset them to the previous state. The JavaScript in this sample illustrates the power of jQuery selectors, including CSS 1, CSS 2, CSS 3, and XPath.

Heading 1 [ x ]	Heading 2 [ x ]	Heading 3	Heading 4 [ x ]
1	2	3	4
1	2	3	4

Heading 1	Heading 2 [ x ]	Heading 3 [ x ]	Heading 4 [ x ]
1	2	3	4
1	2	3	4

5.) The RSS Feed Reader

This example is for when you want to parse your RSS XML feed, and present headlines and summaries back to the user - no server-side knowledge required. Using jQuery and XML in conjunction with XPath lets you take advantage of the most robust features of the library.

This example uses a static XML file that was generated from a live feed on our Web site. It prints out the last five posts.

These examples "should" work with FF 1.5+, IE 6+, Safari 2+, and Opera 9+.

The JavaScript code used here can be confusing for someone who is unfamiliar with jQuery. I invite you to visit www.jquery.com and browse through the tutorials and documentation. If you are new to JavaScript, then I suggest you begin the learning process by visiting www.w3schools.com, and use the Mozilla Developer Center as a reference.

Email blog@reindel.com with any questions or comments.