Archive for November, 2006

Really Simple Live Comment Preview

Sunday, November 19th, 2006

Introduction and Caveat

I'm sure that some of you were expecting this entry to discuss traversing the DOM using jQuery methods. After all, I said I would do just that in my last entry. But a couple nights ago, I had the impulse to try a "live comment preview," so I'm going with it. My next entry, then, will be "How to Get Anything You Want - Part 2." I promise.

Please keep in mind as you read through this tutorial the "learning" part of this site's title: I'm learning jQuery just as many of those who will read this entry are. I mention this now because I have the nagging feeling that it was just too easy to create the live preview. Surely I must be doing something wrong. As always, I am counting on the superior knowledge of my readers to point out where my code fails. But enough of the apologies. Let's get started.

Quick Setup

For the live preview I started with the default comment form in WordPress's Kubrick template:

HTML:
  1. <form action="..." method="post" id="commentform">
  2.   <p><textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea></p>
  3.   <p><input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
  4.   <input name="comment_post_ID" value="30" type="hidden">
  5.   </p>
  6. </form>

The important part here is the textarea's id="comment". We want to show the contents of that textarea as the user inputs them.

Create the Preview DIV

Now on to the jQuery code. (more...)

How to Get Anything You Want - part 1

Sunday, November 12th, 2006


With jQuery, you can get to just about anything on a web page. In this entry, I'll show you a few ways you can use jQuery's versatile selector expressions to traverse to an element — or group of elements — in the DOM.

I've put together a short paragraph and an ordered list scattered with inline elements such as <em>, <code>, and links. It's all wrapped in a DIV with an ID of "jqdt," which allows me to focus the demonstration to one area of this page.

(more...)

Documentation and Support Resources for jQuery

Saturday, November 4th, 2006

One of the first things I want to know when I try out a new programming language or library or framework is where I can find documentation and support. Yet too often I have found an otherwise promising new tool to be nearly useless for someone like me who is just starting out and can't immediately absorb all of the functionality just by looking at source code.

The excellent documentation is one of the things that first attracted me to jQuery, and with the release of 1.0 (we're now at 1.0.3) the API is baked right into the uncompressed jQuery source code comments. As helpful as this is, however, there may be times when new jQuery users need even more help. So, here is my list of useful resources for great information.

(Skip to the complete list without descriptions)

API

  • jquery.com/api: Pulled directly from the source code comments, the API page contains all of the jQuery methods at your disposal in an alphabetically paginated format
  • Visual jQuery: This site, maintained by Yehuda Katz, pulls from the same source source code comments, but displays the methods in a lovely graphical manner. Many jQuery developers have made Visual jQuery their default reference destination.

Wiki

The jQuery docs wiki has information that doesn't fit into the API. I use it mostly for its list of jQuery expressions that allow you to traverse the DOM and get any element or attribute therein. For example $('p.intro img[@src$=jpg]) would get all jpg images — that is, images with an src attribute ending in "jpg" — that appear within any paragraph with a class of "intro").

Note: jQuery supports CSS 1-3 expressions, but only basic XPath expressions.

Community

jQuery has an incredibly vibrant and generous developer community. To become a part of it you can:

You may want to search the mailing list archives at nabble.com before posting a question.

Tutorials

No matter how comfortable I feel doing the jQuery thing, sometimes I just want my hand held to see how code is written from start to finish. That's where the tutorials come in handy.

  • jQuery Basics: From jquery.com, this tutorial steps you through launching code on document ready, making something happen on click, adding a class, creating special effects, and working with callbacks.
  • Getting Started with jQuery: Covers a simple "hello world" example, selector and event basics, AJAX, FX, and usage and authoring of plugins. Knowledge of JavaScript and the document object model (DOM) is required.
  • 15 Days of jQuery: Tutorials and example code for table striping, safer mailto links, stylesheet switching, multiple-file uploading, and more.

I'm doing my best to add useful tutorials here at Learning jQuery, too, so keep checking back for more! In the meantime, here are links to all of the resources I mention in this entry:

The Complete Resource List #

Truth be told, I'll probably be referring to this list as much as anyone else. So, if you have any additional resources that you've found particularly helpful on your road to jQuery nirvana, please put them in a comment, and I'll update the entry accordingly.

Bonus

As much as I love Visual jQuery, sometimes it's really hard for me to see the big picture because of the page's layout, especially on my tiny PowerBook's screen. I've heard rumors that Yehuda is planning to redesign it a bit; in the meantime, I've created a custom stylesheet that I use whenever I go to the site. It hides the header and moves the reference information up:

CSS:
  1. div#header {display: none;}
  2. ul {top: 20px;}

If you use Firefox with the Web Developer extension, you can add a custom stylesheet from the Web Developer toolbar's "CSS" menu.