Learning jQuery

We’ve received a number of comments recently from people looking for variations on the showing and hiding theme. For the basics, you can take a look at two earlier entries, Basic Show and Hide and Slicker Show and Hide.

For a full-blown plugin solution with lots of options, look no further than Jörn Zaefferer’s Accordion Menu. But if you want to try some showing and hiding on your own, read on.

(more…)

Need to clone an element and its events? Sure, you could rebind the events after doing the clone, but that wouldn’t be very DRY now, would it? Introducing Copy Events, a new plugin for jQuery.

(more…)

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:

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...)

With all the fun new things you can do using jQuery and other JavaScript libraries, people are using links ("a" tags) for much more than sending users to a different page. One little annoyance I've found when using links for these events, though, is the little dotted outline that appears around the linked words upon clicking them and making them "active."

It makes sense to see the outline when clicking, but I don't want it to stay there.

In Firefox 1.5 and up, it's easy to get rid of the outline with a little CSS:

Unfortunately, that doesn't work in Internet Explorer 6 and below (is anyone surprised?).

Wouldn't it be nice to get rid of the outline in every browser (as long as JavaScript is enabled, of course)?

jQuery to the Rescue

The trick is to take the focus off the link once it has been clicked, and jQuery makes that simple. In the jQuery Discussion List, Klaus Hartl offered this snippet, which works perfectly:

Or, if you wanted to apply the blur only to links inside a DIV with an ID of "magic," for example, you could replace $('a') with $('#magic a'). If the blur should apply only to links with a class of "fun," the selector would change to $('a.fun'). See how easy? Give it a try:

click me and I won't show the ugly dotted outline

For this little demo, I gave the link a class of "fun" and put the above jQuery code inside $(document).ready() (For more on $(document).ready(), see Introducing $(document).ready() ). I also added return false; because I didn't want the link to take you anywhere.

A couple weeks ago someone on the jQuery discussion list asked if someone could reproduce a rotating headline box in which the headlines, in succession, scroll up into the box, pause, and then scroll up out of the box. Since I already had some code for rotating images on a page, I decided to recycle it and take the challenge.

Here is the finished product. (Please note that if you are looking at this in a feed reader, you won't be able to see the effect. )

This is headline number 1. It's the first one that you'll see. Others will arrive shortly.

I am headline number 2. The one before me was number 1. But really, it wasn't anything special. I'm here now, and that's all that matters.

Headline number 2 was a little arrogant. He thought he'd be here forever. But he was obviously wrong. Nothing lasts forever. Not even me, Headline number 3. This is a link to nowhere.

What was that last headline talking about? That's some pretty philosophical stuff. If I think too much about it, I get dizzy. So, I'm just going to enjoy being Headline number 4. Be in the moment.

(more...)

One more great thing about $(document).ready() that I didn't mention in my previous post is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your javascript file with them.

It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free.

You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so:

You could also do something like this inside a single .js file:

A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code:

Even for this little amount of code is a shortcut available:

$(function() {
// do something on document ready
});

A function passed as an argument to the jQuery constructor is bound to the document ready event.

Coming Up: In my next entry, I'll show how to do a simple effect with jQuery. You'll be amazed at how easy it is!