jQuery Plug-ins

Posted December 8th, 2009 in Javascript (Updated May 14th, 2010)

I use a number of jQuery plug-ins and have been posting about how to use some of them recently, and these posts have proved to be quite popular. This post is a summary of my jQuery plugin posts and I'll keep it updated as I add additional articles and howtos for them.

jQuery Cookie

jQuery Cookie makes it really easy to set and read cookies. It can be downloaded here from the jQuery plugins website.

My posts about jQuery Cookie:

• Setting cookies with jQuery - how to set them, read them and delete them. Also shows how to set the number of days before they expire and the path.

Ellipsis

The text-overflow CSS property can be used to have ellipsis (...) when text overflows a container but this is not supported in any current version of Firefox (as at December 12th 2009). The jQuery Ellipsis plug-in provides a jQuery workaround for Firefox. The clever thing about this workaround is it will not apply the fix again if the browser already supports the text-overflow or -o-text-overflow properties.

• Download the plug-in
• Read my post titled "Using ellipsis with HTML and CSS"

Facebox

Facebox is a Facebook style modal dialog window. The official website is here.

My posts about Facebox:

• jQuery Facebox Basic Example - this has a working example and a basic HTML skeleton to get you started.
• Make jQuery Facebox loading screen auto-center - the box loads in an arbitrary position by default and then centers correctly after the content has loaded. This post shows how to make it auto-center when it first displays so there's no jump after it's loaded.
• jQuery Facebox dialog with opaque background - shows how to make the page behind the Facebox popup be opaque; this has working examples on the page.
• jQuery's Facebox and Google Maps - this shows an issue I was having when loading a Google Map into a Facebox dialog on my New Zealand Running Calendar website.

Superfish

Superfish creates Suckerfish style flyout menus from HTML unordered lists. You can download it here from the jQuery plug-ins website and read the documentation etc here on the Superfish website.

My posts about Superfish:

• jQuery Superfish Menus Plug-in - an introductory post with a working example
• jQuery Superfish Menus Plug-in and Caching the menu - how to cache the menu as a variable in a Javascript file to cut down on page size
• Kidzstuff reskinned and uses jQuery Superfish Menus plug-in

Other Plug Ins

I'll update this page as I add additional posts about these and other jQuery plug-ins.