Over the last year, Smashing Magazine has evolved. We’ve been publishing fewer lists and more in-depth articles about design and Web development. We have invited professionals and high-profile developers to write for us. We’ve been investing more resources in the quality and relevance of our articles. We’ve also explored new formats; and on weekends we’ve been publishing more inspirational pieces, leaving the in-depth articles to weekdays.
We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. We are not big fans of lists either, but the format is useful and — if the resources are relevant — can be extremely helpful. Therefore, we’ve decided to add a couple of round-ups per month as a bonus to our regular articles. Instead of replacing the main articles, we will add round-ups on top of our regular schedule. If you don’t like round-ups or find them inappropriate, please feel free to skip them. How does this work for you?
In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.
Tips, Hints, Navigation
TipTip jQuery Plugin1
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com8. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.
Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…
Jquery Two Sided Multi Selector 12
This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.
jQuery Keyboard Navigation Plugin16
The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.
FullCalendar – Full-sized Calendar jQuery Plugin18
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).
iPhone Style Radio and Checkbox Switches using JQuery and CSS20
A simple technique for creating radio button and checkbox switches with jQuery.
jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element 22
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.
A Better jQuery In-Field Label Plugin24
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.
Login or Signup with jQuery28
Uniform – Sexy forms with jQuery30
Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Slideshows and Galleries
Nivo Slider: Slideshow jQuery Script34
Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.
Improving The Content
Dynamic Footnotes With CSS and jQuery38
Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.
jQuery Captify Plugin v1.1.340
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).
Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery42
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.
Charts and Graphs
10 jQuery Plugins for Easier Google Map Installation 52
The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.
Images and Visual Effects
jQuery imageless buttons a la Google54
This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.
Pines Notify jQuery Plugin64
Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.
Animate Panning Slideshow with jQuery66
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
Sponsor Flip Wall With jQuery and CSS 68
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.
Brosho ‘Design in the Browser’ jQuery Plugin72
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.
Is adding round-ups to our regular content a good idea?
- 1 http://code.drewwilson.com/entry/tiptip-jquery-plugin
- 2 http://code.drewwilson.com/entry/tiptip-jquery-plugin
- 3 http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
- 4 http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
- 5 http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/
- 6 http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/
- 7 http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/
- 8 http://www.ted.com
- 9 http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/
- 10 http://labs.engageinteractive.co.uk/nav-o-matic/
- 11 http://labs.engageinteractive.co.uk/nav-o-matic/
- 12 http://www.stevefenton.co.uk/Content/Jquery-Two-Sided-Multi-Selector/
- 13 http://www.stevefenton.co.uk/Content/Jquery-Two-Sided-Multi-Selector/
- 14 http://www.geektantra.com/projects/jquery-megamenu/index.html
- 15 http://www.geektantra.com/projects/jquery-megamenu/index.html
- 16 http://mike-hostetler.com/jquery-keyboard-navigation-plugin
- 17 http://mike-hostetler.com/jquery-keyboard-navigation-plugin
- 18 http://arshaw.com/fullcalendar/
- 19 http://arshaw.com/fullcalendar/
- 20 http://devgrow.com/iphone-style-switches/
- 21 http://devgrow.com/iphone-style-switches/
- 22 http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select
- 23 http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select
- 24 http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
- 25 http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
- 26 http://www.csskarma.com/blog/sliding-labels-v2/
- 27 http://www.csskarma.com/blog/sliding-labels-v2/
- 28 http://www.9lessons.info/2010/04/log-in-or-sign-up-with-jquery-and-php.html
- 29 http://www.9lessons.info/2010/04/log-in-or-sign-up-with-jquery-and-php.html
- 30 http://pixelmatrixdesign.com/uniform/
- 31 http://pixelmatrixdesign.com/uniform/
- 32 http://razorjack.net/quicksand/
- 33 http://razorjack.net/quicksand/
- 34 http://nivo.dev7studios.com/
- 35 http://nivo.dev7studios.com/
- 36 http://hashgrid.com/
- 37 http://hashgrid.com/
- 38 http://ignorethecode.net/blog/2010/04/20/footnotes/
- 39 http://ignorethecode.net/blog/2010/04/20/footnotes/
- 40 http://thirdroute.com/projects/captify/
- 41 http://thirdroute.com/projects/captify/
- 42 http://beckelman.net/post/2009/01/22/Copy-to-Clipboard-with-ZeroClipboard-Flash-10-and-jQuery.aspx
- 43 http://beckelman.net/post/2009/01/22/Copy-to-Clipboard-with-ZeroClipboard-Flash-10-and-jQuery.aspx
- 44 http://welcome.totheinter.net/columnizer-jquery-plugin/
- 45 http://welcome.totheinter.net/columnizer-jquery-plugin/
- 46 http://www.trirand.com/blog/?page_id=6
- 47 http://www.trirand.com/blog/?page_id=6
- 48 http://www.appsheriff.com/web-apps/script/dygraphs-create-interactive-zoomable-charts/
- 50 http://gmap.nurtext.de/
- 51 http://gmap.nurtext.de/
- 52 http://speckyboy.com/2010/02/03/10-jquery-plugins-for-easier-google-map-installation/
- 53 http://speckyboy.com/2010/02/03/10-jquery-plugins-for-easier-google-map-installation/
- 54 http://swizec.com/code/styledButton/
- 55 http://swizec.com/code/styledButton/
- 56 http://www.viget.com/inspire/jquery-presentation-plugin
- 57 http://www.viget.com/inspire/jquery-presentation-plugin
- 58 http://srobbin.com/blog/jquery-pageslide/
- 59 http://srobbin.com/blog/jquery-pageslide/
- 60 http://workshop.rs/projects/jqfancytransitions/
- 61 http://workshop.rs/projects/jqfancytransitions/
- 62 http://coffeescripter.com/code/ad-gallery/
- 63 http://coffeescripter.com/code/ad-gallery/
- 64 http://pines.svn.sourceforge.net/viewvc/pines/trunk/pnotify/index.html
- 65 http://pines.svn.sourceforge.net/viewvc/pines/trunk/pnotify/index.html
- 66 http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
- 67 http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
- 68 http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
- 69 http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
- 70 http://jashkenas.github.com/coffee-script/
- 71 http://jashkenas.github.com/coffee-script/
- 72 http://usejquery.com/posts/8/brosho-design-in-the-browser-jquery-plugin
- 73 http://usejquery.com/posts/8/brosho-design-in-the-browser-jquery-plugin
- 74 http://gamequery.onaluf.org/
- 75 http://gamequery.onaluf.org/
- 78 http://answers.polldaddy.com/poll/3118651/
- 79 http://polldaddy.com/features-surveys/