Learning jQuery

In the jQuery universe, Cody Lindley is probably most known and loved for his Thickbox, a lightbox technique that “can show html pages as well as images … pulled from the server using AJAX” (cf. Thickbox – One Box to Rule Them All). However, he has also created another useful plugin called jTip, a light-weight AHAH tooltip solution with some nice options. As Lindley explains:

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string. The height is liquid and stretches to match the content that fills the tool tip. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example.

A Few Changes

When Rey Bango asked the jQuery Discussion List for some help with updating the plugin, I jumped at the chance. Together — and with assistance from others on the list — Rey and I made the following changes:

1. The hide() method is added to the mouseout to correct an issue with Firefox
2. An iframe is inserted to correct IE’s problem with select boxes always getting top billing for z-index. The iframe is styled to cover the select box while remaining transparent, based on the CSS at <SELECT>-Free Layer
3. If JTip appears to the left of the element hovered over, and if the JTip is too wide to fit entirely within the document window, its width decreases to the widest possible without having any of it cut off.
4. The JTip position moves up if it’s initially cut off at the bottom of the viewable area, and moves down to the top of viewable area if its height is greater than that of the document window.

Come and Get It

You can see a demo of the original jTip and the updated jTip.

You can also download everything you need in a single zip file:

• jtip.zip (7.8KB ZIP)

Or grab the files separately:

• jtip.css
• arrow_left.gif
• arrow_right.gif
• loader.gif
• jtip.js

One Small Problem

There is only one small problem still unresolved: In Firefox 1.5.x, when the jTip’s link is close to the bottom of the viewable area, the jTip flashes below the viewable area for a split second before appearing in its optimal position. If the page doesn’t already have a vertical scrollbar, one will quickly appear and then disappear. There must be a way to prevent this annoyance, but I haven’t figured it out yet. I first load the jTip with its contents, then get its height, and finally show it — a sequence that should avoid the problem. And it does work in other browsers, just not Firefox. Oh well, I’m still learning. The good news is that the set of circumstances necessary to produce the problem would hardly ever happen on my sites. Still, if anyone out there has a suggestion, I’d love to hear it.

Update

This plugin is no longer being supported. If you’re interested in trying a tooltip plugin with lots of features, please check out my clueTip jQuery Plugin. Thanks.

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

Read the rest of this entry »

John Resig just announced on the jQuery mailing list this evening that jQuery 1.0.2 has been released. According to Resig, "This release is a huge bug fix release - and it is highly recommended that you upgrade right away."

Resig also credited Jörn Zaefferer with much of the work on this latest jQuery version:

I'd like to take this opportunity to introduce everyone to Jörn Zaefferer. Much of this release was made possible by him. He's responsible for completely overhauling the test suite (it now has over 260+ tests!) and for fixing the majority of the current bugs and enhancements (over 60 of them!).

While version 1.0.2 mostly tightens up code and fixes bugs, John Resig and the jQuery developer community are already working on lots of cool features and enhancements for the upcoming version 1.1, so stay tuned.

Congratulations to John, Jörn, and the rest of the jQuery developers on making the best JavaScript library even better!

Downloads

• jQuery 1.0.2: jquery-1.0.2.js (48KB)
• jQuery 1.0.2 compressed: jquery-1.0.2.pack.js (18KB)

In Fancy Drop Cap - Part 1, I showed how I used jQuery to insert a drop cap on my personal weblog. But there is still some unfinished business to take care of:

1. Accounting for cases in which the first paragraph (where I want my drop cap to go) starts with another tag of some sort (<a href="...">, <em>, etc.)
2. Adding a little CSS to the drop cap

So let's begin with item 1. As you may recall, we defined three variables, first_paragraph, first_letter, and text. The variables allowed us to get the value of the textNode of the first letter of the first paragraph, so we could replace it with the image. Here is what that part looked like:

The only problem with that code is that line 3 assumes that the first child node of the first paragraph is actually a text node. But what if it's a span tag (<span>) or a link (<a href="...">)? Well, in that case we'll need to keep drilling down through the nodes until we can't go any farther.

Loop the Loop

To do that, we'll set an intermediate variable, called node, initially making it the same as first_paragraph:

Next, we change our node variable to be defined as the first child of that node (node = node.firstChild), and we keep doing that until there are no more child nodes left, by using a "while" loop:

So, in other words, as long as there is a child node, our variable will be reset as that child node.

The First Letter — and Only a Letter

When that's all done, we set our text variable, this time as the value of our node variable:

Now all we have to do is get the first letter of the text so that we can replace it with the drop-cap image: var first_letter = text.substr(0,1).

There is just one more thing that we should account for Read the rest of this entry »