7 jQuery Plugins That Made Our Lives Easier at ON Networks

Nov 12, 2007

We, the developers of ON Networks released version 1.1 of our website this evening (its built off of drupal of course... if it weren't, than I would go sharing it with the planet, would i?). The notable improvements are ajax comments, tooltips for episodes, and a global navigation.

In celebration of this small milestone, I figured I'd reveal our favorite jQuery plugins that we're using. (note that our site's jQuery is 1.2.1... which is several versions ahead of the vanilla drupal core).

1. Cycle Plugin -- An early concept of our new homepage used this plugin. While that concept is dead, this plugin is very much alive in my head. Indeed, its one badass little jQuery plugin. For starters, it supports all the browsers I care about, offers tones of cool animations, and its syntax, and expected markup are bloody simple. Best of all, the author was a mind reader, and gave me all the options I needed, allowing me to use it without altering the plugin's source code.

2. Tooltips -- This small, high performance, easy to customize plugin was a breeze to fit into our design. My favorite feature? An IE png fix is built into the plugin. We had to hack it a bit to shift images on the basis of where it was in the page, but case and point: the code was understandable enough for us to do it.

3. HoverIntent -- Plain and simple: this plugin helps you write ajax that doesn't make people want to set buildings on fire.

4. validation -- Great client side validation plugin. Only weakness: you can only specify validation rules inline, (inside the form elements' 'class' attribute') when using drupal. (for whatever reason, it seems to choke on the '-' character.) However, the inline syntax is simple enough. And its possible to implement entirely through hook_form_alter. We of course chose to override default form elements via phptemplate, so that required, required, maxlength, and minlength values were automatically applied. Check it out, its usage is very well documented.

5. Treemenu -- The natural ajax replacement for Drupal menus. Very simple syntax, just apply it to a certain unordered list, and you're good to go.

6. jQuery Corner -- If you want to do curved corners in javascript, accept no substitute. This one will give the least problems hands down. Just remember, if you want put padding on the elements inside the curved corner, put the padding on a CONTAINER ELEMENT within the element you apply the corners to. Also, if you want them to be curved and to preserve a background image (as opposed to solid colors), you're out of luck. 

Those issues aside, its still the best javascript curvy corner script on the market (btw, the competitors all suffer from the same gotchas -- this one just does it more gracefully).

7. Ajax Queue -- The uses of this plugin are pretty obscure to most people. This plugin helps you deal with situations where a javascript function is completing before you intend for it, and allowing other functions to execute, while a crucial function somewhere is still processing. Some know what I'm talking about... this plugin was absolutely crucial for our ajax comments. God bless the authors.

Wed, 2008-05-14 20:31
By marco (not verified)

nice list

only drawback is that jQuery Corners does not work good on Safari: the transparent part of the corners is black..doh..unless you have a black background layout as the one at One Networks ;)
Wed, 2008-01-30 21:47
By a passing drifter (not verified)

curvyCorners for JQuery?

I think there is found a better rounded corners (keeps background images). http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery

Thu, 2007-12-13 19:19
By A Young (not verified)

Help with getting this to work with drupal

I am trying to use the cycle plugin in my drupal site - here is the code block from my page:

<?php
drupal_add_js 
(
'$(document).ready(function(){
$("#s5").cycle("fade"); 
});'

'inline'
);
?>

<div id="s5">
<img src="/drupal/files/u159/beach1.jpg" title="Beach" width="200" height="200" />
<img src="/drupal/files/u159/beach2.jpg" title="Beach" width="200" height="200" />
<img src="/drupal/files/u159/beach3.jpg" title="Beach" width="200" height="200" />
</div>

No transition occurs, and the js error is this:
$.isFunction is not a function
Anyone have a workaround for this?

Mon, 2008-03-10 04:19
By a passing drifter (not verified)

Install the jquery update module

The Jquery that ships with Drupal 5 is a little outdated and is incompatible with the Cycle plugin. To get the plugin to work, install the Jquery Update module: http://drupal.org/project/jquery_update

Fri, 2007-12-14 19:47

What jquery version are you

What jquery version are you using? Drupal 5 is several versions behind. I assume you remembered to do this too:

<?php
 
drupal_add_js
(PATH_TO_YOUR_MODULE.'/jquery.cycle.js''module'); 
?>
Tue, 2007-12-04 01:26
By a passing drifter (not verified)

jquery versions

Great article, thanks for posting. I had a quick question though how hard is it to upgrade to jquery version 1.2.1. It is my understanding that just swapping out the jquery.js file is not an option because it will break core. Ive looked into the jquery-update module but that only gets you to 1.1.2. Can you explain how you guys updated to 1.2.1 or just give some insight...thanks ;)

Tue, 2007-12-04 19:07

I forgot :-) -- I think we

I forgot :-) -- I think we just enabled jQuery update, plopped the new one in, and corrected any errors that were caused by changes between versions. You can find those in the jQuery changelog.

Tue, 2007-11-20 02:37
By Karl Swedberg (not verified)

stay away? really?

Hi Nick,

I enjoyed reading this entry about the jQuery plugins you chose. I have to say, though, that I was a little taken aback by your suggestion to "stay away" from the clueTip plugin. As the plugin's author, I always appreciate constructive feedback. If you'd like to provide some, feel free to contact me directly or post to the jQuery discussion list.

Tue, 2007-11-20 17:42

Come to think of it, that

Come to think of it, that wasn't really fair. Especially since there have been a lot of updates to cluetips since I last used it. It was the first plugin I used, and the first versions I got up seemed to be eating up a lot of cpu, and I was finding it difficult to style (but it may have just been what happens when you have 20 firefox windows open, and IE6/7+ safari on other monitors for testing). The tooltips pretty much did what I needed out of the box (background PNGs with an IE6 fix) , and felt snappier. I also found it more practical to switch the tooltip classes to control the positioning, instead of using the offsets.

Fri, 2007-11-23 03:01
By Karl Swedberg (not verified)

thanks

Hi Nick, thanks a lot for the reply. Jörn's Tooltips is a great plugin, for sure, and it does have a couple options that clueTip doesn't (mouse tracking and delay come to mind). But it's really a much lighter plugin than clueTip with far fewer options (no loading of content via ajax/ahah, no loading from another element on the page, no "smart" or user-configurable positioning other than offsets). I don't mean that as a dig on Tooltips (anyway, I consider Jörn a friend), or even to boast of clueTip. It's just to say that the two plugins are very different.

As for the PNG transparency thing, I got frustrated with IE's lack of png support really early on, so I came up with a different solution for drop shadows, using a few (number is user-configurable) offset divs with progressively reduced levels of opacity. Relatively painless.

I haven't heard of anyone having problems with cpu load, except one guy who was trying to bind the clueTip to 1,000 elements, and the problem was really with the event binding itself, not with anything the plugin was doing.

Sorry your initial experience was disappointing. I have made a ton of improvements to it since the initial (pre-)release. If you're at all interested, feel free to check out the documentation and demo. Thanks again!

Mon, 2007-11-19 15:57
By a passing drifter (not verified)

awesome job

Great job!!

it would be even better if, with every plugins brief usage, you gave a link or told where its used on your site.

Thanks for the post!

Sat, 2007-11-17 00:41
By Dave (not verified)

Fantastic.

It's like being given the keys to a really nice car. Thanks Nick!

Thu, 2007-11-15 01:33
By chronnus (not verified)

Wow, those are useful

Wow, those are useful plugins, I can see using Cycle Plugin and Hoverintent on a lot of projects.

Wed, 2007-11-14 04:55
By chris (not verified)

New Design

It looks so good! Great job.

Post new comment

Please solve the math problem above and type in the result. e.g. for 1+1, type 2
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><p><h1><h2><h3><h4><h5><h6><code><cite><blockquote><img>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web and e-mail addresses are automatically converted into links.
  • Lines and paragraphs break automatically.
More information about formatting options