Learning jQuery

A common pattern in jQuery plugin development is the need to undo what the plugin has done. This is usually handled through a method prefixed with “un”. Another common pattern is the use of anonymous functions for event handlers. Unbinding events is easy with jQuery but unbinding a single event handler requires the use of a named function. jQuery 1.2 now provides another option for binding and unbinding events: event namespaces.

(more…)

Beta 2 of the clueTip Plugin for jQuery is out the door and on the server. I’ve made a number of fairly significant changes (for the better, I hope), both to the script and to the CSS. One notable addition is the ability to apply a “jTip” style to the clueTips by changing the CSS, setting the new “arrows” option to true and the new “dropShadow” option to false. Here is the full list of what has been changed:
(more…)

There was a request recently on the jQuery discussion list for an enhancement to Ritesh Agrawal’s Simple Star Rating System to allow for 1/2 star ratings. So I took it upon myself to add the feature.

Keep in mind that this plugin does not “degrade” when the browser doesn’t have JavaScript or when JavaScript is disabled. The the elements for the stars are created by the jQuery code, so when JavaScript isn’t available, the elements don’t appear. Therefore, if you are not absolutely certain that visitors to your site will have JavaScript available, this plugin probably isn’t the best solution for you. (See Wil Stuckey’s jQuery Star Rating Plugin for a degradable option.)

My addition to the plugin is pretty simple. It just adds another option to the settings, called increment, so you can do something like this now: $('#rate1').rating('example.php', {maxvalue: 5, increment: .5});. If no increment value is set, or if it’s greater than or equal to .75, the plugin will use whole-star increments. If the value is less than .75, it’ll use half-star increments. Here you can see it in action:

I also updated Ritesh’s demo page to include the new example: Simple (Half) Star Rating System. If you like it, you can download the files from there.

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

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.