Archive for June, 2011

My Working Set of jQuery Plugins (and some Other Hacks) by DFF

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

Fall Cow by DFF

jQuery

www.jQuery.com

The source of jQuery.

jQueryUI

www.jQueryUI.com

The source of jQuery’s user interface modules.

AjaxContactForm

http://midmodesign.com/news/coding/jquery-ajax-contact-form-with-honeypot/

A straightforward Ajax Contact Form that can be dropped into a sidebar anywhere. You can see this in action at www.kelleyhousemuseum.org.

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.

jkMegamenu

www.javascriptkit.com/script/script2/jkmegamenu.shtml

This little module from JavascriptKit is a straightforward implementation of a mega-dropdown menu. You can see this code in action on MendocinoFun.com.

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.
Back to TOP Page UP Page DOWN