chrismar.sh

web developer, movie lover and tea drinker

Posts Tagged ‘top 10’

10 jQuery Plugins You Can’t Live Without

Friday, April 29th, 2011

JQuery is a great Javascript library. It doesn’t have the rigour of Prototype or MooTools, which I find to be more suited to developers, but its ease of use and great extensibility make it my first choice.

Another knockout feature in jQuery is the ability to write plugins. I use a few of them a lot: here they are…

  1. Easing

    The standard easing that comes with jQuery are pretty good, and are suitable for most things. But when you need something to spring or bounce into place, GSGD’s easing plugin gives you a huge number of options.

  2. PNG Fix

    The bane of the web developer, Internet Explorer 6, doesn’t support transparent PNGs. This plugin gets around that limitation using a proprietary Microsoft filter. It’s really extensible, allowing you to replace all PNGs in a webpage or to specify exactly which elements you replace.

    This plugin saves a load of time, avoids silly (and wasteful) GIF replacements, and allows you to apply a simple and consistent fix.

  3. Form Validation

    Not a hugely difficult thing to do in Javascript, but you need to validate forms so often that having a regularised way to do it can be a real bonus. This plugin gives you that ease of use that is a plugin’s real value.

  4. File Upload

    The file upload input is a pain to style – you can’t really do anything with it. This plugin smoothes all this over. It allows you not only to select the files you want to upload, with an easily-stylable upload button and text input, but also allows multiple file uploads, drag and drop support, resumable uploads and lots more.

    A really user-friendly way to enhance your forms.

  5. Dynamic News

    A great way to add a news slider to your site. It can either search the content of the page for the headlines to display (fairly useful), or load them from an RSS feed (very useful). On a page that needs something a little bit more, especially if your site has a syndicated news feed anyway, this plugin really does the trick.

  6. Table Sorter

    Whenever the case is there to actually use HTML tables (i.e. when there actually is a load of data that can be made sense of in rows and columns), a lot of developers who haven’t written tables for years have to reopen their “Beginner’s Guide to HTML” books to remember the markup!

    Once your table is written, this plugin allows your users to sort the table columns: great if you have large amounts of data. It allows you to sort alphabetically, numerically, by date, currency and lots more. It even allows you to add custom sort types.

  7. Twitter Plugin

    Everyone’s on Twitter these days… and everyone has a blog. One of the great things about the way the web has developed is the interoperability of your various accounts. Tweets appear in Facebook; Foursquare checkins also check in to Facebook places; your blog cross-posts to Tumblr.

    This plugin gives you the chance to show your Twitter feed on your site, with a simple interface and easy to style markup. Simple, and an easy way to keep new content appearing on your site.

  8. Nested Sortables

    If your users need to able to sort a list of items, for instance in the back-end of a CMS to reorder pages, this plugin is ace. You can drag and drop the list into whatever order you like, and it returns the new order as an array, a serialised string or a hierarchy for you to write back the options to a database.

    This is a plugin that probably benefits a small number of fairly high-end developers, but when you need it, it’s perfect!

  9. jTruncate

    A really good plugin doesn’t need to be too complex: it just needs to do one thing well. jTruncate does exactly that. It truncates long text to your specifications, allowing content-heavy sites to still contain all the text they need to but allowing the site user to choose when and how that text is displayed.

    You can truncate the text after a certain number of characters, define the ‘Read more’ and ‘Read less’ text, and that’s about all you need!

  10. FancyBox

    No list of plugins would be complete without an overlay plugin. This one can overlay images, video, Flash or AJAX requests in a modal popup. It can group together linked images and provide navigation between them, and, best of all for your users, looks great!

    There’s a few nice little touches, such as choosing transitions, using the mouse scrollwheel, adding a semi-transparent overlay and adding a neat drop shadow beneath the image.

These plugins are all really useful: I wouldn’t necessarily add jQuery to a site just to use one of these effects, but since most of the jobs I work on require at least some scripting, jQuery is often loaded anyway, and these plugins can make your job as a coder that much easier.