Learning jQuery

Two years ago I made the somewhat immodest claim that 2007 would be the “Year of jQuery.” Since then, jQuery‘s popularity has grown in ways that none of the core contributors could have imagined. Now I’m ready to make another bold pronouncement: 2009 will be the year of jQuery UI. Here’s why: Read the rest of this entry »

If you haven’t poked around under the hood of jQuery, you might not be aware that when you pass the jQuery function an expression or DOM element it places these elements (or, possibly a single element) into an object, and then this object is returned so that it can be chained. Without getting into the details of chaining, the fundamental concept to remember is this:

Most jQuery methods return the jQuery object itself, which allows methods to be chained.

Read the rest of this entry »

Somebody on the jQuery Google Group asked the other day about toggling a checkbox within a table row when the user clicked anywhere within the row. This can be a nice feature to have, and it’s also very straightforward to implement.

Read the rest of this entry »

This post, my 55th on Learning jQuery, is a departure from the usual jQuery tutorials and announcements. It’s about my experience speaking at the Future of Web Design (FOWD) conference in New York City this week. I’m writing it mostly for myself, to set down in writing my thoughts about what went right and what went wrong for me at the conference, and to learn from it. I’m also writing this with the hope that someone else might be able to learn from my experience, as well. While I’ll try not to make it too terribly self-indulgent, there will be some “self-disclosure” that might make you feel uncomfortable, so if you’re looking for something less personal here, please stop reading this and head over to the category archives, where you’ll find some good tips on using jQuery.

Read the rest of this entry »

This tutorial describes a way to avoid a flash of unstyled content that sometimes occurs when applying styles with JavaScript on page load. The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex. We can see an example of the problem on this test page.

The page is a copy of a previous entry on this blog with over 140 comments—quite a lot of content. Look for the bright yellow background before the page finishes loading. That's the part that is supposed to be hidden from the start — a simple unordered list, <ul id="flash">.

In pages with a more reasonable length, the standard jQuery code would work just fine:

But in this page there is a whole lot of document that has to be ready before anything inside the $(document).ready() function can be executed. Too much, in fact. And putting the <script> tags just inside the closing </body> tag doesn't help either. No, using JavaScript to hide elements like this just won't work unless the scripts are placed in the HTML immediately following the elements they're hiding.

Re-posted from Rey Bango's blog.

As many of you have seen by now, the jQuery Project's site has been redesigned. It had been a long overdue task and it was important to put a fresh new spin on the main hub, and the face, of jQuery. One of the things about the jQuery Project is that we've never run with the crowd or accepted the norm. By pushing boundaries and sometimes being "in your face," we've not only grown tremendously in popularity but we've pushed most of the other JS library projects to rethink their own principles and make changes to improve their products. That's a good thing for everyone as competition is always good.