Learning jQuery

Someone on the jQuery Google Group yesterday asked about how to display a border around elements on hover. Here is a quick script I wrote to achieve that effect:

Read the rest of this entry »

Most if not all of the jQuery plugins out there have some level of customization. But very few of the plugin authors have mastered the very particular art involved.

Achieving the “optimum level” of customization is a bit of a balancing act… go too far either way and you’ve got an unusable plugin!

Read the rest of this entry »

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

Read the rest of this entry »