45+ New jQuery Techniques For Good User Experience


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

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.


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


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.


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


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.


Form Manipulation

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


7. Submit a Form without a Page Refresh17


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.


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


Navigation Menus

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


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


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


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!


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


Manipulating Content

16. jQuery books widget35
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.


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.


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


19. Coda-Slider41
As with the last tool, groups items together using 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.


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


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.


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


24. TableEditor54
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.


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


Lightbox Techniques

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


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


29. jQuery.popeye64
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!


Browser Tweaks

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


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

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

35. Fix Overflow75
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.


36. Lazy Load77
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 here78.

37. Maxlength79
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.


Animation Effects

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


41. Flip87
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.


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


Image Manipulation

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


44. jQZoom94
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.



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


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.

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

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



  1. 1 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
  2. 2 http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/
  3. 3 http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
  4. 4 http://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://valums.com/projects/ajax-upload/
  10. 10 http://valums.com/s/p/ajax-upload/demo.htm
  11. 11 http://www.emposha.com/javascript/jquery/jquerymultiselect.html
  12. 12 http://www.emposha.com/javascript/jquery/jquerymultiselect.html
  13. 13 http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery
  14. 14 http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery
  15. 15 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
  16. 16 http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
  17. 17 http://nettuts.com/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
  18. 18 http://nettuts.com/demos/contactform/
  19. 19 http://midmodesign.com/news/coding/jquery-ajax-contact-form-with-honeypot/
  20. 20 http://midmodesign.com/downloads/ajaxcontactformv1/
  21. 21 http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
  22. 22 http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
  23. 23 http://abeautifulsite.net/notebook/80
  24. 24 http://abeautifulsite.net/notebook_files/80/demo/jqueryContextMenu.html
  25. 25 http://www.jeremymartin.name/projects.php?project=kwicks
  26. 26 http://www.jeremymartin.name/examples/kwicks.php?example=1
  27. 27 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
  28. 28 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
  29. 29 http://abeautifulsite.net/notebook.php?article=58
  30. 30 http://abeautifulsite.net/notebook_files/58/demo/
  31. 31 http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/
  32. 32 http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html
  33. 33 http://alistapart.com/articles/sprites2
  34. 34 http://alistapart.com/d/sprites2/examples/example6-function.html
  35. 35 http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/
  36. 36 http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/
  37. 37 http://nettuts.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/
  38. 38 http://nettuts.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/
  39. 39 http://plugins.jquery.com/project/pagination
  40. 40 http://d-scribe.de/webtools/jquery-pagination/demo.htm
  41. 41 http://www.ndoherty.com/demos/coda-slider/1.1.1/
  42. 42 http://www.ndoherty.com/demos/coda-slider/1.1.1/
  43. 43 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  44. 44 http://www.ndoherty.com/demos/coda-slider/
  45. 45 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  46. 46 http://css-tricks.com/examples/FeaturedContentSlider/
  47. 47 http://css-tricks.com/examples/FeaturedContentSlider.zip
  48. 48 http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
  49. 49 http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
  50. 50 http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html
  51. 51 http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html
  52. 52 http://tablesorter.com/docs/
  53. 53 http://tablesorter.com/docs/
  54. 54 http://dev.iceburg.net/jquery/tableEditor/demo.php
  55. 55 http://dev.iceburg.net/jquery/tableEditor/demo.php
  56. 56 http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html
  57. 57 http://www.webtoolkit.info/demo/jquery/scrollable/demo.html
  58. 58 http://css-tricks.com/revealing-photo-slider/
  59. 59 http://css-tricks.com/revealing-photo-slider/
  60. 60 http://fancy.klade.lv/
  61. 61 http://fancy.klade.lv/
  62. 62 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  63. 63 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  64. 64 http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/
  65. 65 http://dev.herr-schuessler.de/examples/jquery-popeye/
  66. 66 http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
  67. 67 http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
  68. 68 http://code.google.com/p/agile-carousel/
  69. 69 http://www.5bosses.com/examples/agile_carousel/multi_example/carousel.html
  70. 70 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
  71. 71 http://www.filamentgroup.com/examples/equalHeights/
  72. 72 http://www.emposha.com/javascript/jquery-ie6-png-transperency-fix.html
  73. 73 http://plugins.jquery.com/project/bgiframe
  74. 74 http://brandonaaron.net/jquery/plugins/bgiframe/test/
  75. 75 http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
  76. 76 http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
  77. 77 http://plugins.jquery.com/project/lazyload
  78. 78 http://www.appelsiini.net/projects/lazyload/enabled.html
  79. 79 http://remysharp.com/2008/06/30/maxlength-plugin/
  80. 80 http://remysharp.com/demo/maxlength.html
  81. 81 http://www.flowplayer.org/tools/scrollable.html
  82. 82 http://www.flowplayer.org/tools/scrollable.html
  83. 83 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  84. 84 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  85. 85 http://css-tricks.com/jquery-robot/
  86. 86 http://robot.anthonycalzadilla.com/
  87. 87 http://lab.smashup.it/flip
  88. 88 http://lab.smashup.it/flip
  89. 89 http://lab.smashup.it/flip/files/jquery.flip-0.4.1.zip
  90. 90 http://snook.ca/archives/javascript/jquery-bg-image-animations/
  91. 91 http://snook.ca/technical/jquery-bg/
  92. 92 http://deepliquid.com/content/Jcrop.html
  93. 93 http://deepliquid.com/projects/Jcrop/demos.php
  94. 94 http://www.mind-projects.it/projects/jqzoom/
  95. 95 http://www.mind-projects.it/projects/jqzoom/
  96. 96 http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
  97. 97 http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
  98. 98 http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/
  99. 99 http://www.shopdev.co.uk/blog/sortables.html
  100. 100 http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/
  101. 101 http://yensdesign.com/tutorials/musicplayer/
  102. 102 http://iso-100.com/blog/post/updated-script-for-tracking-outbound-links-in-google-analytics-with-jquery/
  103. 103 http://www.stanlemon.net/projects/jgrowl.html
  104. 104 http://growl.info/
  105. 105 http://www.stanlemon.net/projects/jgrowl.html

↑ 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.

  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!

  2. 2

    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/

  3. 3

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

    Well done SmashingMagazine :)

  4. 4

    Great Techniques, Thanks for the list.

  5. 5

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

  6. 6

    Awesome! Thanks

  7. 7

    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.

  8. 8

    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!!!

  9. 9

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

  10. 10

    cool~ I Love JQuery !

  11. 11

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

  12. 12


    January 15, 2009 9:48 pm

    Really nice post, very usefull. Thanks Smashing!!

  13. 13

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

  14. 14

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

  15. 15


    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.


  16. 16


    January 15, 2009 11:12 pm

    Wow…absolutely brilliant!

  17. 17

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

  18. 18

    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?

  19. 19

    awesome! big thanks

  20. 20

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

  21. 21

    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/

  22. 22

    Smashing did it again! thanks for this awesome list

  23. 23

    Very useful! Thanks!

  24. 24

    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?

  25. 25

    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 :(

  26. 26

    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.

  27. 27

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


  28. 28

    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.

  29. 29

    Gorgeous list, thank you, SM ! :-)

  30. 30

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

  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.

  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 ?


  33. 33

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

  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.

  35. 35
  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!

  37. 37

    Thanks! But where are examples for prototypejs?

  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!

  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!

  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 ^^

  41. 41

    thanks thanks thanks!
    I LOVE YOU smashing magazine

  42. 42

    Just one word – SMASHING!!!

  43. 43

    Perfect! This will be the most used reference this year!

  44. 44

    Does this ever come in handy.

  45. 45

    Nice! I just bookmarked like 6 pages. This is the best post in a while, IMO.

    I especially like the FancyBox effect of popping the you tube video up.. very clean.

    Also, the color fade in on a link someone had was great too.. I’ll be using that for sure.

  46. 46

    nice art. thx very much.

  47. 47

    bau wau

  48. 48

    Nice post! It’s amazing! Thanks.

  49. 49

    awesome list … dugg it for future reference … i am also looking for a jquery facebook like chat ui … I wish some one also make a plugin of jquery in it … just the ui

  50. 50

    Wow, this is like web developer porn…awesome article!

  51. 51

    An Awesome list SM.

    Can’t wait to try some of these out.


  52. 52

    thanks for the post. Try the image manipulation, simple gallery, background image and flip are very useful for me.

    But the No.14’s technique, i think mootool’s one is better.

  53. 53

    Wow. Decent search result list, but what’s up with all the gushing, bootlicking, obsequious comments?!?

    So someone used Google to scour the net for 45 definitely-not-new jQuery plugins and techniques and made a Cosmo-like article out of it. (Fifteen Ways To Leave Your Website Lover! Forty-Six Tests To Know Your Mate Practices Safe CSS!)

    Does Smashing Magazine have some job openings or something? Is there a free source of Zoloft I am not aware of?

  54. 54

    Brilliant guys, thanks!

  55. 55

    Awesome article, keep up the great work Smashing !!!

  56. 56

    I love this article.

  57. 57

    Useful stuff here! The jQuery File Tree will be especially useful for me — I haven’t seen that one before.

  58. 58

    jQuery is the bomb!! Love the amazing list. Thanks!

  59. 59

    I think jQuery is great, but it’s easy to get a glut of plugins for it. I think you’re better off making your own, since it is so much easier to work with than javascript.

  60. 60

    Thank you! this is a very useful list

  61. 61

    I guess this will help me a lot. Great list, thank you very much!

  62. 62

    Nice list. Some stuff in there that I hadn’t seen before.

  63. 63

    Thanx for this usefull list! Some very nice eye-openers

  64. 64

    @alphadog. I know it’s creepy. It’s like we’re the only normal ones and the rest have been taken over by the body snatchers. Wait till you see what they’re like when you show them some bad HDRI photography. They really let go then :(

    It’s becoming increasingly irrelevant to come here. I think I generally visit the three websites they crib all their stuff off each time. I had LITERALLY seen every one of these. Months ago.

  65. 65

    Sweet!! This is what I was looking for. I was not too impressed with jQuery at first but this really prroves me wrong. Thank you.

  66. 66

    Well done Noura .. That’s a big list & very useful to me .. bookmarked for sure ;D keep it up please we are waiting for more

  67. 67

    aah!! nothing special here, seems like its a combination of 2-3 jquery related bogs :)

    still its too little, many more i found here…


  68. 68


    January 16, 2009 11:41 pm

    thanks Jquery

  69. 69

    The worst part of these plugins is that designers get paid the big money to add these effects with Flash.

  70. 70

    Thanks for the referral ;)

  71. 71

    It’s so cool , thanks.

  72. 72

    What a great article!!!

  73. 73

    This is a great list,loving using jquery.

  74. 74

    Thank you Smashing Magazine. I like JQuery. Ajax upload works.

  75. 75

    Thanks for the list.
    For text size changing I have done a very light weight and reusable jQuery function (just one function call will make all the interface with cookie support).

    Please check it:
    Url: http://cool-javascripts.com/jquery/building-a-reusabe-font-size-controller-interface-using-jquery.html

  76. 76

    just when i needed it most, thanks SM!

  77. 77

    Yes JQuery is great, I don’t know much about JavaScript but I learned the basics of jquery and started to use it right away, and the results was sooo good. I also used some of those plugins in my recent projects like the Coda slider, Simple gallery,Table and galleria and they made them look greeaaaaaaaaat.
    Well Done Noura keep going.

  78. 78

    Atiq at Metrodesk.com.bd

    January 18, 2009 12:53 pm

    Brilliant guys ! Love the amazing list.

  79. 79

    so guys should i put down flash, and start using jquery?

    what is the major difference? maybe jquery even uses les kb on most of these options.

    very interested if someone could pls post an answer

  80. 80

    Great informative list!

  81. 81

    For serious use of tables (especially if hooking to an SQL backend) in a jQuery plugin that is highly configurable (with good defaults) I suggest you take a look at Allan Jardine’s DataTables

    I’ve used them here for a largish database of World Bank data on subsidies to farmers.

  82. 82

    Two Socks - Graphic design and print

    January 19, 2009 4:59 am

    thanks nice list :)

  83. 83

    Thanks a lot. I am a jQuery fan :)

  84. 84

    Mind blowing, wonderful, marvelous, … these are the words for the author.
    Truly Innovative.

  85. 85

    Thanks for this list, got me into jQuery this weekend and I like it!

  86. 86

    This website is wonderful! Thank you for your awesomeness! I am so glad you’re so awesome and that it is free. This will really help me achieve great wonderfulness and awesomeness. jQuery rules, but with magnificence and benevolence. If jQuery were a person, I’d wash its feet with oil and myrrh, and swaddle them in the finest lambswool after a sound kissing. Smashing Magazine is awesome, and lovely, and wonderful too.

    Psst, @zarathustra: just blending in… maybe they won’t notice I didn’t drink the ecstasy kool-aid…

  87. 87

    Hi Admin,

    Really amazing collection to improve UI to a great extent. Well there’s a mistake I guess, it is a Photo Revealer with jQuery not Spoiler Revealer with jQuery. Kindly correct it.

    Best Regards,

  88. 88

    I enjoyed the article. It seems as though #2 is linking to the wrong tutorial, however? (photo slider)

  89. 89

    E-gads you guys rounded up some kick-@$$-ish new to me goodies, man, yum-ee!!

  90. 90

    Fantastic List!
    Thanks a lot!

  91. 91

    Awesome List, wow I’ve been looking for something like this, Yeah!!!

    Thank You

  92. 92

    Excellent information! I liked the perspective of presenting it, till now what ever information and advantages I read on the internet just presented it in a technical manner, but this one could be well understood and explained to a not so technical person.

  93. 93

    Excellent Article… Great job

    I love jQuery

  94. 94

    2. Spoiler Revealer with jQuery
    has a wrong link

  95. 95

    Wow! 45+ jquery techniques! Drools~ I love jquery!

    SmashingMagazine, you roxxxx!
    Love your comment box too, love the preview. How can I have one like this?

    Guys, you could also checkout the 37 shocking jQuery plugins too!

  96. 96

    Great list.

    Already incorporating a couple from this list into my new site.

    Thanx SM!

  97. 97

    excellent post

  98. 98

    It’s just amazing how great this website is – Beatufidul graphics with uncomparable posts/topics , often updated, extremely useful-helpful. Thank you for all excellent work!

  99. 99

    another smashing hit………


  100. 100

    Thank you very very much.
    I can say that you guys are experts…
    Keep Rocking…………………………….

  101. 101

    The great Datatables is missing here !
    It’s a wonderful plugin to handle large tables, sort, dynamically load, search into the table, etc.
    You’ll find it on google – it’s so useful !

  102. 102

    I realy appriciate you and thanks for providing such type of list

  103. 103

    nice !!!!

  104. 104

    It’s a list! Who can argue with that!? Bookmarked!!

  105. 105

    Awesome! Jquery is a lamp of Aladin.
    Why don’t we create a website for components of Jquery?
    It will be helpful for everyone…

  106. 106

    #5, Filament Group’s jQuery plugin to build charts from HTML tables, has been re-released with a lot of improvements. You can check it out here:

  107. 107

    these are some of tips i was looking for a long time. i think these examples can be easily modified.

  108. 108

    Its an remarkable collection of some awesome jquery implementation.
    I really appreciate this bcoz I was in need of this for a long time.

    Thank You So Much!

  109. 109

    Nice tips, cheers to the owners !! But Nothing new !!

  110. 110

    fabulous jQuery ultimate stuff r here thanks dude

  111. 111

    Nice roundup of usable jQuery implementations! thanks

  112. 112

    Fading in notification messages like the ones used in Twitter and Stackoverflow are a good user experience as well since they don’t burden the user. There is a configurable plugin for that:
    jBar: A jQuery Notification Plugin

  113. 113

    Great collection of jQuery uses. We use at least 10 of these on a regular basis. We just built our own jQuery based slider presentation tool called SlideDeck. http://www.slidedeck.com.

  114. 114

    Any jackass can kick down a barn. Takes planning and, you know, actual work to build one.

  115. 115


  116. 116

    Abhishek Lavaniya

    April 15, 2010 10:25 pm

    Nice tutorial.

    Thank you very very much Smashing Magazine.

  117. 117

    Great stuff, I can wait to see the resultats on my work, some are for fun, but some others will be very useful, thank youdesign

  118. 118

    awesome collection of jquery..Thank you…i like you comment box and the panel to display the comments..Did you use any jquery plugin for this?..

  119. 119

    awesome jquery collection….Thank you..I like your comment box and the panel to display the comment..Did you use jquery ?..can you give me more details about the comment box..

  120. 120


  121. 121

    nice…very useful..

  122. 122
  123. 123

    Thanks for such a great list.

  124. 124


    cool list.i have some new jQuery plugin please see this:-



  125. 125


    I like you Jquery Plugins List.I have also some new brand jquery Plugin list:-



  126. 126


    I cool list.I have also 70+ jQuery Best Interface Techniques and Tutorials



  127. 127

    They do now! :)

  128. 128

    Very Cool collection of jQuery sample you have here.

  129. 129

    great collection. Thanks for sharing!

  130. 130

    Amazing! For a nice and seeking google all night because of this and i as a final point found it here!

  131. 131
  132. 132

    Great !!!!!

  133. 133

    Very Usefull.

  134. 134

    hi nikita
    how it’s use, i don’t know?

  135. 135

    great list…very useful.

  136. 136

    great list;

  137. 137

    I just made a whole new and improved version of Agile Carousel (one of the items shown in the above article). Check it out!

  138. 138

    Sandeep Tripathi

    May 9, 2011 12:51 am

    Hey its Amazing.. All stuff there is usefull & easy to use. Image-cropping functionality is Awesome :-)

  139. 139

    Deepali Katkar

    May 11, 2011 4:43 am

    awesome, I just love it n like to play with it

  140. 140

    Please update the 18. Pagination link with http://d-scribe.de/webtools/jquery-pagination/demo/demo.htm

  141. 141


  142. 142

    Not sure I’ll ever need an animated robot, but there’s a lot of great info. here.

  143. 143

    It is very helpful….

  144. 144


  145. 145

    Thx for grouping those cool tools

  146. 146

    Some kinds of problem exist

  147. 147

    Nice Collection Keep It Up :)

  148. 148

    Nguyễn Đình Đại

    October 5, 2012 7:20 pm

    Very good!

  149. 149




  150. 150

    These are amazing scripts. Very cool! Thanks for sharing.
    I also would like to share a new jQuery slider creator , it is totally free:)
    Hi Slider
    Thanks :)

  151. 151

    Awsome info and straight to the point. I don’t know if this is truly the best place to ask but do you guys have any thoughts on where to get some professional writers? Thank you :)


↑ Back to top