Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

45+ New jQuery Techniques For Good User Experience

Advertisement

JavaScript libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

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:

Dynamic Content Link

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.

jQuery6

2. Spoiler Revealer with jQuery7
A simple technique that hides some content first and fades it in once a link is clicked.

jQuery8

3. AJAX Upload
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.

jQuery

4. FCBKcomplete9
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

jQuery10

5. Create Accessible Charts Using Canvas and jQuery
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.

jQuery

Form Manipulation Link

6. Radio Button and Check Box Replacement11
This jQuery tool replaces radio buttons and check boxes with a more appealing display.

jQuery12

7. Submit a Form without a Page Refresh13

jQuery14

8. jQuery AJAX Contact Form
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.

jQuery

9. Simple jQuery Form Validation15
This jQuery form shows live form-input validators both server-side and browser-side.

jQuery16

10. jQuery Context Menu17
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.

jQuery

11. Kwicks for jQuery18
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.

jQuery19

12. jQuery iPod-style Drilldown Menu
“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.”

jQuery

13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

jQuery20

14. How to Create a MooTools Home Page-Inspired Navigation Effect21
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!

jQuery22

15. CSS Sprites223
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.

jQuery24

Manipulating Content Link

16. jQuery books widget25
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

jQuery26

17. Text Size Slider27
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.

jQuery28

18. Pagination29
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.

jQuery

19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.

jQuery

20. Creating a Slick Auto-Playing Featured-Content Slider30
If you love the Coda-Slider plug-in 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.

jQuery31

21. haccordion34
A simple horizontal accordion plug-in for jQuery.

jQuery35

Tabular Data and Grids Link

22. Table Row Checkbox Toggle
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.

jQuery

23. Tablesorter36
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.

jQuery37

24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.

jQuery

25. Scrollable HTML Table38
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.

jQuery39

26. Revealing Photo Slider40
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.

jQuery41

27. FancyBox42
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.

jQuery43

28. Facebox Image and Content Viewer 44
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.

jQuery45

29. jQuery.popeye
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.

jQuery

Image Galleries and Viewers Link

30. Simple Controls Gallery46
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.

jQuery47

31. Agile Carousel
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!

jQuery

Browser Tweaks Link

32. Setting Equal Heights with jQuery48
A script to equalize the heights of boxes within the same container and create a tidy grid.

jQuery49

33. jQuery IE6 PNG Transparency Fix50
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.

34. BGI frame51
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here52.

35. Fix Overflow53
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.

jQuery54

36. Lazy Load55
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here56.

37. Maxlength57
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.

jQuery58

Animation Effects Link

38. Scrollable
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.

jQuery

39. jQuery Fading Menu – Replacing Content59
“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.”

jQuery60

40. Build an Animated Cartoon Robot with jQuery61
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.

jQuery62

41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.

jQuery

  • Download files here.

42. Use jQuery for Background Image Animations63
Animate your menu whenever a user hovers over an item with this effect.

jQuery64

Image Manipulation Link

43. Jcrop65
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.

jQuery66

44. jQZoom67
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.

jQuery68

Miscellaneous Link

45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.

jQuery

46. Sortable Lists69
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.

jQuery70

47. Amazing Music Player Using Mouse Gestures and Hotkeys71
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.

jQuery72

48. Script for Tracking Outbound Links in Google Analytics with jQuery
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.

<script type="text/javascript">
	$('#content a:not(.popupwindow)').filter(function() {
		var theHref = this;
		if (theHref.hostname && theHref.hostname !== location.hostname) {
			$(theHref).not(".noAutoIcon").addClass("offSite");
			$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
				var code=event.charCode || event.keyCode;
				if (!code || (code && code == 13)) {
					if(pageTracker){
						var fixedLink = this.href;
						fixedLink = fixedLink.replace(/https?://(.*)/,"$1");
						fixedLink = '/outgoing/'   fixedLink;
						pageTracker._trackPageview(fixedLink);
					};
				};
			});
		};
	});
</script>

49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework73 works.

jQuery

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
  2. 2 https://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/
  3. 3 https://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
  4. 4 https://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/
  5. 5 http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/
  6. 6 http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/
  7. 7 http://css-tricks.com/examples/SpoilerRevealer/
  8. 8 http://css-tricks.com/examples/SpoilerRevealer/
  9. 9 http://www.emposha.com/javascript/jquery/jquerymultiselect.html
  10. 10 http://www.emposha.com/javascript/jquery/jquerymultiselect.html
  11. 11 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
  12. 12 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
  13. 13 http://nettuts.com/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
  14. 14 http://nettuts.com/demos/contactform/
  15. 15 http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
  16. 16 http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
  17. 17 http://abeautifulsite.net/notebook/80
  18. 18 http://www.jeremymartin.name/projects.php?project=kwicks
  19. 19 http://www.jeremymartin.name/examples/kwicks.php?example=1
  20. 20 http://abeautifulsite.net/notebook_files/58/demo/
  21. 21 http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/
  22. 22 http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html
  23. 23 http://alistapart.com/articles/sprites2
  24. 24 http://alistapart.com/d/sprites2/examples/example6-function.html
  25. 25 http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/
  26. 26 http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/
  27. 27 http://nettuts.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/
  28. 28 http://nettuts.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/
  29. 29 http://plugins.jquery.com/project/pagination
  30. 30 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  31. 31 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  32. 32 http://css-tricks.com/examples/FeaturedContentSlider/
  33. 33 http://css-tricks.com/examples/FeaturedContentSlider.zip
  34. 34 http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
  35. 35 http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
  36. 36 http://tablesorter.com/docs/
  37. 37 http://tablesorter.com/docs/
  38. 38 http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html
  39. 39 http://www.webtoolkit.info/demo/jquery/scrollable/demo.html
  40. 40 http://css-tricks.com/revealing-photo-slider/
  41. 41 http://css-tricks.com/revealing-photo-slider/
  42. 42 http://fancy.klade.lv/
  43. 43 http://fancy.klade.lv/
  44. 44 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  45. 45 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  46. 46 http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
  47. 47 http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
  48. 48 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
  49. 49 http://www.filamentgroup.com/examples/equalHeights/
  50. 50 http://www.emposha.com/javascript/jquery-ie6-png-transperency-fix.html
  51. 51 http://plugins.jquery.com/project/bgiframe
  52. 52 http://brandonaaron.net/jquery/plugins/bgiframe/test/
  53. 53 http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
  54. 54 http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
  55. 55 http://plugins.jquery.com/project/lazyload
  56. 56 http://www.appelsiini.net/projects/lazyload/enabled.html
  57. 57 http://remysharp.com/2008/06/30/maxlength-plugin/
  58. 58 http://remysharp.com/demo/maxlength.html
  59. 59 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  60. 60 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  61. 61 http://css-tricks.com/jquery-robot/
  62. 62 http://robot.anthonycalzadilla.com/
  63. 63 http://snook.ca/archives/javascript/jquery-bg-image-animations/
  64. 64 http://snook.ca/technical/jquery-bg/
  65. 65 http://deepliquid.com/content/Jcrop.html
  66. 66 http://deepliquid.com/projects/Jcrop/demos.php
  67. 67 http://www.mind-projects.it/projects/jqzoom/
  68. 68 http://www.mind-projects.it/projects/jqzoom/
  69. 69 http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/
  70. 70 http://www.shopdev.co.uk/blog/sortables.html
  71. 71 http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/
  72. 72 http://yensdesign.com/tutorials/musicplayer/
  73. 73 http://growl.info/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Noura Yehia is a Web designer and blogger and the former owner of noupe.com. If you want to connect with the author, you can follow her on Twitter.

Advertisement
  1. 1

    Over 45!! Really?

    45 is one of the biggest numbers!! That’s way better than over 40, or over 35.

    Thanks, SmashingMagazine, you’re the best!

    -6
  2. 2

    A cropper using Mootools 1.2 (like number 43, Jcrop) : ByCropper for Mootools 1.2

    -3
  3. 3

    sam (January 15th, 2009, 9:01 pm)

    Steps to have a profitiable blog.

    1) Choose a stupid name.
    2) Go to well known websites, and “report” on every little aspect of them. Such as, what plug-ins are made.
    3) Make sure your posts are in the format: ”
    4) Don’t worry about the actual content, the title is really all that matters!
    4) PROFIT!!!

    Wow! you made it sound really easy! Why didn’t you do it yourself then?

    4
  4. 4

    Some interesting looking techniques in here, will take a closer look at those. However it is very important to bear in mind when working with them as with any javascript that you need to always think about accessibility – ie, what happens if the user has javascript disabled?

    It is far too easy to create a site that completely depends on the javascript and won’t work without it. However it usually doesn’t take much additional effort to ensure that if javascript is turned off then your page falls back gracefully into a still fully-functional form.

    -2
  5. 5

    Great post, but could we have something similar for Prototype and Script.aculo.us?

    Thanks

    -2
  6. 6

    all beautiful. Pity there are not ours: JqNews a jquery news slider

    0
  7. 7

    Nice list, my technique for rollovers and tooltips in jQuery could add a little bit to it. http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/

    -10
  8. 8

    What a comprehensive list of jQuery examples. I was looking for similar examples too. Good timing.

    Well done SmashingMagazine :)

    1
  9. 9

    Patrick McLaren

    January 15, 2009 8:23 pm

    Great Techniques, Thanks for the list.

    -2
  10. 10

    Very good list! you guys always list the best stuff!

    -1
  11. 11

    Awesome! Thanks

    1
  12. 12

    wow I really love the jgrowl. I’d love to see something like it implemented on facebook and other social networking sites. I am definitely going to try and use it on some new sites. The animated robot is pretty cool also.

    -3
  13. 13

    Steps to have a profitiable blog.

    1) Choose a stupid name.
    2) Go to well known websites, and “report” on every little aspect of them. Such as, what plug-ins are made.
    3) Make sure your posts are in the format: ”
    4) Don’t worry about the actual content, the title is really all that matters!
    4) PROFIT!!!

    -5
  14. 14

    OrganizedFellow

    January 15, 2009 9:37 pm

    My favorites are #1-45, really.
    Thanks Smashing!

    -3
  15. 15

    cool~ I Love JQuery !

    -3
  16. 16

    Raymond Selda

    January 15, 2009 9:47 pm

    Incredible list! I’m going to incorporate one of these in my next template. Thank you SM.

    -3
  17. 17

    www.karizmatic.fr

    January 15, 2009 9:48 pm

    Really nice post, very usefull. Thanks Smashing!!

    1
  18. 18

    wow… this is a fantastic post! thanks for all the jQuery techniques…

    -1
  19. 19

    Wouldnt mind seeing some on other js libraries like Dojo, Mootools, Prototype – just to balance the scale ;)

    -3
  20. 20

    http://www.csshook.com

    January 15, 2009 10:43 pm

    great article. i am very glad to say i like JQUERY. I mostly use jquery in my site as compare to other javascript tools.

    thanks a lots Jquery team.

    jon

    -2
  21. 21

    StartBreakingFree.com

    January 15, 2009 11:12 pm

    Wow…absolutely brilliant!

    -2
  22. 22

    Thanx for this awesome list. Some I’ve them I haven’t seen yet.

    0
  23. 23

    I was looking for image-cropping functionality to my Web application. Thanks for it! Awesome :-) Is there anybody, who know free plugin to tinyMce as Image Manager?

    0
  24. 24

    awesome! big thanks

    -2
  25. 25

    Number two doesn’t seem to go to the right place – unless of course I’m being stupid!
    I found it here: http://css-tricks.com/fade-in-spoiler-revealer/

    -2
  26. 26

    Smashing did it again! thanks for this awesome list

    -2
  27. 27

    Very useful! Thanks!

    0
  28. 28

    Extremely uninspired list, definitely requires the “new” dropping from the title. For instance the very FIRST example was published in August. In terms of jQuery development that is certainly NOT new. This article wasted my time, I don’t like that :(

    0
  29. 29

    Sam Bannister

    January 16, 2009 2:10 am

    Great list! The ‘Simple Controls Gallery’ looks a lot like the one the BBC News website uses on its main page when something major is happening.

    0
  30. 30

    Gorgeous list, thank you, SM ! :-)

    0
  31. 31

    Nice collection ! I don’t like much the plugin repository of jQuery so articles like that one with only the best plugins are really appreciated.

    0
  32. 32

    I prefer speak in french – smooth ! :-)

    Encore un article qui déchire tout ! Mais qui se cache derrière toutes ces ressources et toutes cette veille ? Un grand merci, même si je n’arrive pas à tout traduire °(:-/
    D’ailleurs ? Il y a des français ? Ca vous dirais pas de traduire un peu ? Ou d’amener des french’ressources ?

    Nak’

    0
  33. 33

    As usual, good stuff Noura…. Nice Collection of techniques !!

    0
  34. 34

    Tom Ross - PSDFAN.com

    January 16, 2009 3:41 am

    I really loved this list. I’m pretty new to J-Query but these are some awesome effects. Thanks for sharing.

    -1
  35. 35

    so coool

    1
  36. 36

    Thanks for the list! All of these examples show the very best of JavaScript, the best thing is that all of these examples are accessible to all users (impaired or not) because they’re all totally degradable. I’m sure Smashing Magazine will continue to serve up content with web standards in mind!
    [/sarcasm]

    0
  37. 37

    Thanks! But where are examples for prototypejs?

    0
  38. 38

    Thanks for these, I’m already using some for my latest project but of course its good to ssee them all in one place. In fact this and the last few articles from Smashing Magazine have been really useful for me, top work guys!

    0
  39. 39

    This is a re-hashed list of previously featured j-query examples.

    We don’t need to be shown the same examples again – please come up with something new!

    0
  40. 40

    nice list but nothing new…you just compiled articles of others blogs…

    et oui Nak1doigt ya des français aussi ici…t’inquiètes, ya rien besoin de traduire, prends juste le code ^^

    0

↑ Back to top