Here’s the second installment in my Working Set series: my
standard set of jQuery plugins. I’ll also include a few other bits of code I use occasionally that are not in plugins. I make no claims about these being the best or anything like that, but this is a really useful, robust set of plugins that will be useful in any Web site.
Cycle Plugin
http://malsup.com/jquery/cycle/
I use this all the time. It’s a very easy way to cycle images or HTML content. There’s even a light version that eschews the flashy kinds of transitions.
DataTables
DataTables.net
This is an amazingly full-featured table plugin. Filtering, striping, searching, and more.
HighSlide
Highslide.com
HighSlide is a superb Javascript library for displaying images and slideshows. This well-supported module has a minimal charge for commercial usage, but it’s well worth it. Tremendous flexibility and stability! It’s been in continuous development for many years, and it really shows in the feature set. They have lots of excellent examples of the library in use.
hoverIntent
jquery.hoverIntent.html
This wonderful little plugin helps smooth out user interactions. Instead of immediately invoking the onmouseover handler on links, this waits for a settable threshold before firing the onmouseover event. If you slide the mouse over a row of menu items, this will suppress all the random firings along the way to wherever you were moving the mouse. It can really make a big difference in reducing the jerkiness of the interface.
SimpleDrop
javascript-array.com/scripts/jquery_simple_drop_down_menu/
Simple jQuery-assisted dropdown menu code. It only does a single level of dropdown, which is plenty— that’s why mega-dropdowns were invented! This code is simple to use and to style with CSS, and it’s robust because it’s so simple. And it works reliably on IE6, too.
Equal Column Heights
(hack)
This is a little hack I use a lot, and it ensures that selected columns are the same height. One of the great advantages of absolute positioning is that you can place sidebar material after more important content in the file for search engine spiders. The disadvantage is that absolute positioning removes the object from the flow, and the sidebar can therefore overlap the footer below if the sidebar is taller than the main content on the page. Note that this can equalize heights among multiple columns, not just 2. Place this code in the bottom of your HTML, just inside the /html tag.
<script type=”text/javascript”>
// this sets all columns to the tallest height of the selected elements….
var max = 0;
$(“#content, #leftnav, #sidebar”).each(function() { max = Math.max(max, $(this).height()); }).height(max);
</script>
This code will equalize the heights of columns with IDs “#content”, “#leftnav”, and “#sidebar”.
There’s my working set. There are other modules I use occasionally, so I’ll get to those in a subsequent post.
