- January 15th, 2009
- 151 Comments
To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.
You may want to take a look at the following related posts:
- 80+ AJAX-Solutions For Professional Coding3
1. Build A Login Form With jQuery5
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.
3. AJAX Upload9
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.
5. Create Accessible Charts Using Canvas and jQuery13
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.
8. jQuery AJAX Contact Form19
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.
12. jQuery iPod-style Drilldown Menu27
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”
13. jQuery File Tree29
14. How to Create a MooTools Home Page-Inspired Navigation Effect31
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!
16. jQuery books widget35
17. Text Size Slider37
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.
20. Creating a Slick Auto-Playing Featured-Content Slider43
If you love the Coda-Slider plug-in44 for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.
Tabular Data and Grids
22. Table Row Checkbox Toggle50
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.
28. Facebox Image and Content Viewer 62
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.
Image Galleries and Viewers
30. Simple Controls Gallery66
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.
31. Agile Carousel68
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.
39. jQuery Fading Menu – Replacing Content83
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”
40. Build an Animated Cartoon Robot with jQuery85
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
46. Sortable Lists98
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.
47. Amazing Music Player Using Mouse Gestures and Hotkeys100
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.
48. Script for Tracking Outbound Links in Google Analytics with jQuery102
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.
- 1 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
- 7 http://css-tricks.com/examples/SpoilerRevealer/
- 8 http://css-tricks.com/examples/SpoilerRevealer/
- 9 http://valums.com/projects/ajax-upload/
- 10 http://valums.com/s/p/ajax-upload/demo.htm
- 13 http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery
- 14 http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery
- 15 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
- 16 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
- 18 http://nettuts.com/demos/contactform/
- 19 http://midmodesign.com/news/coding/jquery-ajax-contact-form-with-honeypot/
- 20 http://midmodesign.com/downloads/ajaxcontactformv1/
- 21 http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
- 22 http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
- 23 http://abeautifulsite.net/notebook/80
- 24 http://abeautifulsite.net/notebook_files/80/demo/jqueryContextMenu.html
- 25 http://www.jeremymartin.name/projects.php?project=kwicks
- 26 http://www.jeremymartin.name/examples/kwicks.php?example=1
- 27 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
- 28 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
- 29 http://abeautifulsite.net/notebook.php?article=58
- 30 http://abeautifulsite.net/notebook_files/58/demo/
- 31 http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/
- 32 http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html
- 33 http://alistapart.com/articles/sprites2
- 34 http://alistapart.com/d/sprites2/examples/example6-function.html
- 39 http://plugins.jquery.com/project/pagination
- 40 http://d-scribe.de/webtools/jquery-pagination/demo.htm
- 41 http://www.ndoherty.com/demos/coda-slider/1.1.1/
- 42 http://www.ndoherty.com/demos/coda-slider/1.1.1/
- 43 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
- 44 http://www.ndoherty.com/demos/coda-slider/
- 45 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
- 46 http://css-tricks.com/examples/FeaturedContentSlider/
- 47 http://css-tricks.com/examples/FeaturedContentSlider.zip
- 48 http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
- 49 http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
- 50 http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html
- 51 http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html
- 52 http://tablesorter.com/docs/
- 53 http://tablesorter.com/docs/
- 54 http://dev.iceburg.net/jquery/tableEditor/demo.php
- 55 http://dev.iceburg.net/jquery/tableEditor/demo.php
- 56 http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html
- 57 http://www.webtoolkit.info/demo/jquery/scrollable/demo.html
- 58 http://css-tricks.com/revealing-photo-slider/
- 59 http://css-tricks.com/revealing-photo-slider/
- 60 http://fancy.klade.lv/
- 61 http://fancy.klade.lv/
- 62 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
- 63 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
- 64 http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/
- 65 http://dev.herr-schuessler.de/examples/jquery-popeye/
- 66 http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
- 67 http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
- 68 http://code.google.com/p/agile-carousel/
- 69 http://www.5bosses.com/examples/agile_carousel/multi_example/carousel.html
- 70 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
- 71 http://www.filamentgroup.com/examples/equalHeights/
- 73 http://plugins.jquery.com/project/bgiframe
- 74 http://brandonaaron.net/jquery/plugins/bgiframe/test/
- 75 http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
- 76 http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
- 77 http://plugins.jquery.com/project/lazyload
- 78 http://www.appelsiini.net/projects/lazyload/enabled.html
- 79 http://remysharp.com/2008/06/30/maxlength-plugin/
- 80 http://remysharp.com/demo/maxlength.html
- 81 http://www.flowplayer.org/tools/scrollable.html
- 82 http://www.flowplayer.org/tools/scrollable.html
- 83 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
- 84 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
- 85 http://css-tricks.com/jquery-robot/
- 86 http://robot.anthonycalzadilla.com/
- 87 http://lab.smashup.it/flip
- 88 http://lab.smashup.it/flip
- 89 http://lab.smashup.it/flip/files/jquery.flip-0.4.1.zip
- 91 http://snook.ca/technical/jquery-bg/
- 92 http://deepliquid.com/content/Jcrop.html
- 93 http://deepliquid.com/projects/Jcrop/demos.php
- 94 http://www.mind-projects.it/projects/jqzoom/
- 95 http://www.mind-projects.it/projects/jqzoom/
- 96 http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
- 97 http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
- 98 http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/
- 99 http://www.shopdev.co.uk/blog/sortables.html
- 100 http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/
- 101 http://yensdesign.com/tutorials/musicplayer/
- 102 http://iso-100.com/blog/post/updated-script-for-tracking-outbound-links-in-google-analytics-with-jquery/
- 103 http://www.stanlemon.net/projects/jgrowl.html
- 104 http://growl.info/
- 105 http://www.stanlemon.net/projects/jgrowl.html