Menu Search
Jump to the content X

50 Useful New jQuery Techniques and Tutorials


The simplicity, advanced features and strong support are common arguments for developers preferring jQuery against other JavaScript-frameworks. In fact, jQuery is one of the most popular JavaScript frameworks, with powerful tools that can significantly 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 improve your skills, in this article we present 50 useful new jQuery techniques and tutorials that have been created recently and that could make the development of your next website an easier and more interesting experience than the last.

See also: Noupe’s 50+ Amazing Jquery Examples- Part11

50 Useful jQuery Techniques Link

Moving Boxes Carousel with jQuery2
Many of the concepts presented in classic carousel tutorials are the same, so this tutorial will not throw a lot of source code at you. The big difference here is that there are buttons to change panels and the panels zoom in and out.

Automatic Infinite Carousel3

Sliding Boxes and Captions with jQuery4
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Sliding Boxes and Captions with jQuery5

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery6
This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Sliding Boxes and Captions with jQuery7

Make a Mega Drop-Down Menu with jQuery8
So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

Mega drop down menu with jQuery9

Creating a Filterable Portfolio with jQuery10
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

Creating a Filterable Portfolio with jQuery11

A fancy search suggestion12
“This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”

A fancy search suggestion13

Current Field Highlighting14
As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.

Current Field Highlighting15

Creating a Dynamic Poll with jQuery and PHP16
“When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.”

Creating a Dynamic Poll with jQuery and PHP17

jQuery Infinite Carousel18
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel19.

Automatic Infinite Carousel20

De-Constructing Accordion and Hover Effects with jQuery21
This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site22 can be achieved using jQuery.

How to Make a Threadless Style T-Shirt Gallery23

Better form submission feedback with jQuery24
Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they’ve been charged 5 times or when you receive 5 contact submissions. The solution is to replace the submit button with a friendly message letting the user know the form is working.

How to Make a Threadless Style T-Shirt Gallery25
Here’s the gist: There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.

How to Make a Threadless Style T-Shirt Gallery26

Create a gallery by using z-index and jQuery27
In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. Also check out Enhancing the z-index Gallery with a Preloader28.

Create a gallery by using z-index and jQuery29

Add a favicon near external links with jQuery30
External links should always be marked distinctly in order to make it easy for readers to see them easily. You cann add a CSS class to all outgoing links using the pseudo-class a[href^=http]. A more dynamic solution is using the favicon.ico of the external site, if it is available of course.

Scrollable Timelines31
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.


Automatically generate table of contents using jQuery33
“Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code.”

Reddit-style Voting With PHP, MySQL And jQuery34
If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Reddit votings35

Making a Content Slider with jQuery UI36
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

Making a Content Slider with jQuery UI 37

BBC Radio 1 Zoom Tabs38
This tutorial explains how to achieve the effect on the latest BBC Radio 1 website39, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

Making a Content Slider with jQuery UI 40

Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP41
This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.

Add to Cart with jQuery42

Create a Digg-style post sharing tool with jQuery43
We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.

Create a Digg-style post sharing tool with jQuery 44

Using jQuery to play Media Files (MP3,WMA,etc,etc)45
I’m going to show you the most productive way (I guess you could say that) of playing a MP3 ( You can also use WMA, and you file of choice) on your website.

Easy Retweet Button46
Ever since I saw the JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that – and in a completely unobtrusive manner. The script itself is completely standalone (no dependencies) and can be included in any page relatively painlessly. Additionally, since it’s just HTML, CSS, and JavaScript, it’s completely themeable and customizable to the style of your site.

  Easy Retweet Button47

Create an amazing music player using mouse gestures & hotkeys in jQuery48
We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Create an amazing music player using mouse gestures & hotkeys in jQuery 49

Creating a Virtual jQuery Keyboard50
This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Creating a Virtual jQuery Keyboard 51

jQuery Feed Menus52

jQuery Feed Menus 53

Automated image preloading for a snappy UI54
We developed a solution that automates the age-old task of preloading images in web applications. It uses javascript and is packaged as a jQuery plugin, but the concept could easily be ported to other libraries or plain old Javascript as well.

Automated image preloading for a snappy UI 55

Quick Tip: Resizing Images Based On Browser Window Size56
In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, uses this technique on their artist pages.

Quick Tip: Resizing Images Based On Browser Window Size57

Exactly Twitter like Follow and Remove buttons with jQuery and Ajax58
This post updated exactly Twitter like follow and remove buttons with fadeOut and fadeIn effect.

Using Form Labels as Input Values with jQuery and CSS59
I nice little additive to web forms is to put the input labels inside of the inputs box as the starting value. By using jQuery to bring the label in as the value we can archive the desired effect without impacting accessibility, since the label elements are still there. Then we can take it a step further by dynamically adding a class to the input and use CSS to style the form only if JavaScript is enabled. The search box at the top of this page is an example of this technique.

Using Form Labels as Input Values with jQuery and CSS60

Pretty checkboxes with jQuery61

Pretty checkboxes with jQuery 62

jQuery and Ajax Best Demos Part-263
A small list of jQuery and Ajax demos.

jQuery and Ajax Best Demos Part-264

A jQuery inline form validation, because validation is a mess Të Position Absolute65
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

A jQuery inline form validation, because validation is a mess Të  Position Absolute66

How to create a sliding image/reveal content with jquery67
Someone asked me about this effect a while ago and i thought i should make a tutorial about this.

   How to create a sliding image/reveal content with jquery68

The scrolling background effect explained69
The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

The scrolling background effect explained 70

Creating a Keyboard with CSS and jQuery71
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I’ll show you how to build it today.

Creating a Keyboard with CSS and jQuery 72

Portfolio Layout Idea Using jQuery73

Portfolio Layout Idea Using jQuery 74

Creating the iPhone unlock screen using xHTML, CSS and jQuery75
The iPhone: Everybody knows what it is, many people “played around” with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we’re used from Apple). I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.

Creating the iPhone unlock screen using xHTML, CSS and jQuery76

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

jQuery File Tree78

Create an Amazon Books Widget with jQuery and XML79
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. 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 books widget.

Create an Amazon Books Widget with jQuery and XML80

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table81
I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table82

Make Your Header Responses To Mouse Movements with jParallax83
jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Make Your Header Responses To Mouse Movements with jParallax  | Design-Notes84

Submit multiple forms with jQuery and Ajax.85
How to submit multiple forms with jQuery and ajax.

Submit multiple forms with jQuery and  Ajax.86

Using jQuery To Manipulate and Filter Data87
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, I will go over four techniques: hover effects, zebra rows, filtering, and sorting.

10 Ways to Instantly Increase Your jQuery Performance - Nettuts+88

Building a jQuery Image Scroller89
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

Building a jQuery Image Scroller - Nettuts+90

Horizontal Scroll Menu with jQuery Tutorial91
In this tutorial you will learn how to create a scroll menu. In the final result you will be able to scroll up and down according to mouse-y axis and we’ll use jQuery.color to animate the background-color changes.

Horizontal Scroll Menu with jQuery Tutorial 92

This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image. There are no drop-downs attached to the menu, but it shouldn’t be hard to add them in which I may do in the future.


Slicker Show and Hide95

Slicker Show and Hide 96

We’re going to tell the script to loop through all of the comments on the page. If the member link on the current comment matches the member link in the profile, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.


FaceBook Like – jQuery and autosuggest Search Engine

 web2ajax 100

“Outside the Box” Navigation with jQuery101
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common

Leopard Desktop with jQuery using jqDock - Nettuts+102

Animate Image Filling Up Using jQuery103

Animate Image Filling Up Using jQuery | Build Internet!104

Sexy Drop Down Menu w/ jQuery & CSS105
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Sexy Drop Down Menu w/ jQuery & CSS | Noupe106

Creating a polaroid photo viewer with CSS3 and jQuery107
Placing pictures on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

Creating a polaroid photo viewer with CSS3 and jQuery108

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.109
Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery.

Super CSS Selector Support with jQuery110
CSS provides a wide array of selectors to specify which elements should be subject to a particular style. CSS 2.1 gives web designers even more granularity when targeting specific elements. This is great in theory. But browser support for these selectors has lagged behind, and IE6 support is limited to only the most basic selectors. This has led to most folks working in the real world stashing the more advanced selectors away for rainy-day experimentation, or idle dreams about the eventual time when we can use these tools.

Would you like to see more similar round-ups on SM? Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    thx! I allready made some of these technique’s but it’s nice to see the better versions :p


  2. 2
  3. 3

    Great list. Really useful and definately a few I’ll be using.

  4. 4

    Incredible post.
    this is what I love to see come out of SM!

  5. 5

    holla, just what I was waiting for

  6. 6

    Nice list!
    btw, you can find some fresh tuts at

  7. 7

    A great list and very useful…..

    Cheers SM

  8. 8

    Excellent info!!

  9. 9

    New? They’re not really new…

  10. 10

    great list….

  11. 11

    “jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.”

    Please! That is one of the WORST things about jQuery: I already have to work in CSS, JS and HTML at the same time as whatever server-side language I am using; the last thing I need is to have to understand JavaScript that looks more like CSS.

    Hence the poll result: give me more JavaScript / CSS roundups, but give me a lot less that relies on ANY framework.

  12. 12

    Thanks a lot!

  13. 13

    Abdulsalam Alasaadi

    August 24, 2009 2:00 am

    Great collection.

  14. 14

    Nothing new here…

  15. 15

    I think nothing is new here

  16. 16

    Thanks for the list. I’ll add creating a sliding resizable grid in JQuery sliding resizable grid in JQuery.

  17. 17

    These round-ups are an awesome way to keep up to date with the trends. Most people don’t have the time/skill/vision to be able to create these sort of things and every good developer knows that the wheel should not be re-invented

  18. 18

    lovely list!.

  19. 19

    that position absolute site doesn’t know how to spell “characters” hehe.

  20. 20

    Very usefull…

  21. 21

    By far the best collection yet!

  22. 22

    Thanks for referring our tut! about mouse gestures and hotkeys! :D

  23. 23
  24. 24

    Amazing ! Thanks .

  25. 25

    wow i have bookmarked most of them, thanks smashing!

  26. 26

    cool list !

  27. 27

    Great list here. It is amazing all that can be done with jQuery.

  28. 28

    AWESOME! Everything I need in a single post. =)


  29. 29

    no quality, but quantity,ey?
    half of this post is crap. the other half is ok…

  30. 30

    It would be useful to see a post like this about scriptaculous and prototype.


↑ Back to top