40 Exceptional jQuery Interface Techniques and Tutorials

Apr 8 2009 by Jacob Gube | 62 Comments

With the advent of JavaScript/web application libraries and frameworks, it’s become much easier to build interactive components for a site. For the folks that are unfamiliar with jQuery – it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow  you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and methods.

In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Whether you’re looking for a particular interface/interaction pattern built on Query (like module tabs or modal windows) or you simply want to learn the library by engaging in step-by-step tutorials – you should be able to find something here for you.

Modal Windows

1. How to create a stunning and smooth popup using jQuery

How to create a stunning and smooth popup using jQuery tutorial screen shot.

In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.

Live Demo

2. Simple jQuery Modal Window Tutorial

Simple jQuery Modal Window Tutorial tutorial screen shot.

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.

Live Demo

3. Building modal panels with jQuery

Building modal panels with jQuery tutorial screen shot.

This jQuery tutorial discusses a method for creating a modal window that builds in graceful degradation in its design for users who don’t have JavaScript turned on.

Live Demo

Tool Tips

4. Build a Better Tooltip with jQuery Awesomeness

Build a Better Tooltip with jQuery Awesomeness tutorial screen shot.

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

Live Demo

5. Smart Tooltips with jQuery

Smart Tooltips with jQuery tutorial screen shot.s

This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.

Live Demo

6. Coda Popup Bubbles

Coda Popup Bubbles tutorial screen shots.

This excellent jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.

Live Demo

Module Tabs

7. Create a Slide Tabbed Box using jQuery

Create a Slide Tabbed Box using jQuery screen shot.

This simple tutorial will show you how to create a set a module tab interface that slides content left and right as you click on the tabs.

Live Demo

8. Create a Tabbed Interface Using jQuery

Create a Tabbed Interface Using jQuery screen shot.

This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.

Live Demo

9. jQuery Tabbed Interface

jQuery Tabbed Interface screen shot.

This excellent tutorial is yet another variation to the popular tabbed interface.

Live Demo

10. jQuery Tabs

jQuery Tabs screen shot.

This tutorial is in screencast format and is aimed at beginners and designers.

Live Demo

Showcasing Images

11. Create Sliding Image Caption with jQuery

Create Sliding Image Caption with jQuery screen shot.

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

Live Demo

12. Image Cross Fade Transition

Image Cross Fade Transition screen shot.

This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.

Live Demo

13. A Basic Image Gallery – The jQuery Way

A Basic Image Gallery - The jQuery Way screen shto.

Create a basic image gallery by leveraging the strengths of jQuery in traversing the DOM and in DOM manipulation.

Live Demo

14. Image Reveal using jQuery

Image Reveal using jQuery screen shot.

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).

Live Demo

15. Inline Image Enlargement with jQuery

Inline Image Enlargement with jQuery screen shotl.

This jQuery tutorial shows you a slick and animated method for enlarging thumbnail-sized photos when the user hovers on them.

Live Demo

16. Slider Gallery

Slider Gallery screen shot.

In this jQuery tutorial, you’ll learn how to create a sliding gallery that leans on jQuery UI to make dealing with theming the web component a breeze.

Live Demo

17. Simple jQuery Image Slide Show with Semi-Transparent Caption

Simple jQuery Image Slide Show with Semi-Transparent Caption screen shot.

In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.

Live Demo

18. BBC Radio 1 Zoom Tabs

BBC Radio 1 Zoom Tabs screen shot.

This screencast tutorial shows you how to zoom in and out of an image and reveal a module tab interface when the user hovers of it. The tutorial was inspired the BBC Radio 1 site which shows a similar effect.

Live Demo

19. Photo Slider Tutorial

Photo Slider Tutorial screen shot.

This tutorial shows you how easy it is to implement the Photo Slider JS library to create a stunning but user-friendly sliding photo gallery.

Live Demo

Interacting with Content / Displaying Content

20. Creating a "Filterable" Portfolio with jQuery

Creating a "Filterable" Portfolio with jQuery screen shot.

In this jQuery tutorial, you’ll discover a method for creating a gallery of images that can be filtered by categories.

Live Demo

21. How to Build a Super Duper News Scroller

How to Build a Super Duper News Scroller screen shot.

This screencast-format tutorial will show you how you can create a news scroller to display dynamic news feed connected to an RSS feed. This tutorial also uses PHP and SimplePie to interface with RSS feeds.

22. Text Resizing With jQuery

Text Resizing With jQuery screen shot.

Resizing text on a web page is often a valuable site feature to help adjust the text within the web page instead of using the browsers’ features. This tutorial goes over a method for being able to resize text with jQuery that will work regardless of what font size units you use (i.e. px, em, %).

Live Demo

23. jQuery Sequential List

jQuery Sequential List screen shot.

This tutorial leverages DOM manipulation to create a jQuery script that will replace your unordered (<ul>) and ordered (<ol>) lists into something fancier. The script you’ll learn to write in this tutorial gracefully degrades in the JavaScript off scenario.

Live Demo

24. Animate your message boxes with jQuery

Animate your message boxes with jQuery screen shot.

You’ll read about a technique on how to animate message boxes using jQuery, in this excellent tutorial.

Live Demo

25. Create an Amazon Books Widget with jQuery and XML

Create an Amazon Books Widget with jQuery and XML screen shot.

You’ll learn how to leverage jQuery and the Amazon API to display products inside a content area that’s horizontally-scrollable in this highly-involved step-by-step tutorial.

Live Demo

26. Building a jQuery-Powered Tag-Cloud

Building a jQuery-Powered Tag-Cloud screen shot.

Tag clouds are effective in display the most popular categories or keywords on your site. By using jQuery and following along this excellent tutorial, you can create a remarkable tag cloud widget on your site.

27. Simple jQuery Spy Effect

Simple jQuery Spy Effect screen shot.

In this tutorial, you’ll discover an innovative technique for mimicking Digg’s now defunct Digg Spy application (here is Digg Spy’s predecessor).

Live Demo

28. Coda Slider Effect

Coda Slider Effect screen shot.

Learn to create the Coda sliding content area using jQuery in this step-by-step screencast.

Live Demo

Web Forms

29. Improving Search Boxes with jQuery

Improving Search Boxes with jQuery screen shot.

Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.

Live Demo

30. Build An Incredible Login Form With jQuery

Build An Incredible Login Form With jQuery screen shot.

If you’re interested in creating better-looking and more interactive signup forms that drop down from its location when a user clicks on it, this excellent jQuery tutorial will show you how.

Live Demo

Navigation Menus

31. Horizontal Scrolling Menu with CSS and jQuery

Horizontal Scrolling Menu with CSS and jQuery screen shot.

This jQuery tutorial will show you a technique for creating an impressive scrollable menu that moves based on the user’s mouse movements.

Live Demo

32. Fading Menu – Replacing Content

Fading Menu - Replacing Content screen shot.

Create an animated fading navigation menu by following along Chris Coyier’s excellent tutorial.

Live Demo

33. Using jQuery for Background Image Animations

Using jQuery for Background Image Animations screen shot.

Johnathan Snook shows us how easy it is to create a slick, animated navigation menu by transitioning background-image position.

Live Demo

34. Animated Menus Using jQuery

Animated Menus Using jQuery screen shot.

Learn how to create this impressive jQuery-based navigation menu that has an interesting animation effect.

Live Demo

35. Create an apple style menu and improve it via jQuery

Create an apple style menu and improve it via jQuery screen shot.

This interesting tutorial shows you how to create an Apple-inspired navigation menu that, when hovered over, expands the navigation item.

Live Demo

36. multilevel Dropdown menu with CSS and jQuery

multilevel Dropdown menu with CSS and jQuery screen shot.

This tutorial shows you how you can leverage some powerful jQuery methods such as .find() and .css() to create an animated, multilevel dropdown navigation menu.

Live Demo

37. jQuery & CSS Example – Dropdown Menu

jQuery & CSS Example - Dropdown Menu screen shot.

In this jQuery tutorial, you’ll find a quick and easy method for creating a dropdown menu. (Live demo on the tutorial page)

38. Creating a Floating HTML Menu Using jQuery and CSS

Creating a Floating HTML Menu Using jQuery and CSS screen shot.

This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.

Live Demo

39. Navigation List menu + jQuery Animate Effect Tutorial

Navigation List menu + jQuery Animate Effect Tutorial screen shot.

You’ll learn about a technique on how to animate a navigation list menu in this wonderful jQuery tutorial.

40. Horizontal Slide Nav Using jQuery & CSS

Horizontal Slide Nav Using jQuery & CSS screen shot.

Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.

Live Demo

Related content

62 Comments

Matt

April 8th, 2009

Some of these demos are pretty lame, how about some quality control? Did you even look at the lame text resizing demo? I don’t have time to look at 40 anyway, 20, or 10, or even 5 good ones would have been fine.

The YPI

April 9th, 2009

absolutely fabulous.

jack

April 9th, 2009

muchos gracias! nice collection and very nice to have it in one place.

Patternhead

April 9th, 2009

Great resource. Thanks

ThemeLib.com

April 9th, 2009

Nice. I love jQuery :D

Andy Gongea

April 9th, 2009

This is quite a list.
Thanks for gathering all this tuts. Pretty useful stuff.

Cheers!

kovshenin

April 9th, 2009

Hey thanks for the list. Very nice tutorials. Some didn’t work in IE6 though :(

Janko

April 9th, 2009

Nice list, thanks for including my tutorial :)

HieuUK

April 9th, 2009

Thank to include my tutorial in the list :).

Adrian

April 9th, 2009

An idea for next time there is an article about tutorials: Rate the tutorials for hardness.

Paul West

April 9th, 2009

Some great tut’s and JS effects that you would normally only see in flash here. Though I do have to agree with Matt that some of these aren’t too great and some I would argue if JS was the best way to get the end result.

Lyndon Commto

April 9th, 2009

Thanks for putting this together.

I also found some good info at:
jQueryBasics.com
http://www.jquerybasics.com

sky

April 9th, 2009

great post..thank u..

Jack F

April 9th, 2009

Thanks for including my jQuery Gallery tutorial! Wondered why I got a couple of comments on it today :D. That site is a bit dead now but I regularly do jQuery video tutorials at learnitscreencasts.net if you want to check them out.

Some great links as well so thank you!

Merewald Valletta

April 9th, 2009

This is an awesome list, thanks so much. I haven’t seen a jQuery list in a long while that had tutorials I’d never seen before and this one does. Thanks! There’s a couple techniques I think I’ll use in my next project.

Nicole Foster

April 9th, 2009

Great list of jQuery techniques. I love jQuery and MooTools for Javascript, they really help you understand Javascript better.

iskandar

April 9th, 2009

Thanks dude. but… it is for WP only or can be applied to regular HTML & PHP website also?

Jacob Gube

April 11th, 2009

@Matt: The intent here is to showcase a large variety. You can bookmark this resource for later reference if you don’t want to check them all out in one sitting.

Darren Cadwallader

April 11th, 2009

Yup, some nice effects here (some better than others, but the simpler ones are good for beginners, no? @Matt)

Also, I like what the BBC has been doing with their site (going all out on JS instead of flash), thanks for drawing my attention to it!

Gelay

April 11th, 2009

Nice list. Create Sliding Image Caption with jQuery (No. 11) is neat.

kevin

April 13th, 2009

Thanks for showcasing my modal window, animate menu, image gallery and tabbed interface tutorials. :)

aravind

April 14th, 2009

great list!

I was looking fro something like this to enhance my current theme. timely hit!!

Dima

April 15th, 2009

Cool. Now i can make beautifull gallery on my site

Arti

April 16th, 2009

They are wonderful!! Thanks you tooooo much, you are perfect!

bloom

April 19th, 2009

can anyone get number 11. “Create Sliding Image Caption with jQuery” to work with a valid xhtml doc type? love the effect but can’t impliment it successfully.

Jonathan Yarbor

April 25th, 2009

It always amazes me how many greate Jquery tuts and plugins out there. Great List!!!!

PelFusion

April 26th, 2009

very nice collection

SohelElite

August 9th, 2009

Good Collection but needs to be updated some pages mention are not available

medyum

August 16th, 2009

This is an awesome list, thanks so much. I haven’t seen a jQuery list in a long while that had tutorials I’d never seen before and this one does. Thanks! There’s a couple techniques I think I’ll use in my next project.

CandyA

August 18th, 2009

Hmm – looks like #13 isn’t working – figured you might want to know that

ariston servisi

September 26th, 2009

I haven’t seen a jQuery list in a long while that had tutorials I’d never seen before and this one does. Thanks! There’s a couple techniques I think I’ll use in my next project.

Marcell Purham

December 25th, 2009

Great Jquery list! I love seeing what javascript can do and experimenting with it

tom

January 13th, 2010

how can i insert data in ASP.NET C# using JQuery

Indialike

February 8th, 2010

Very nice and useful tutorials for web designers,
Thanks for posting.

fadi ahmad

February 10th, 2010

really jQuery make a fun

kyle

February 19th, 2010

has any one seen or know of a tuttorial that has the same functionality as a gallery viewer with a next and previouse button but one can also ad a

content title
price
discription: ohiuhgygdi oieuueghdg edygd gegdgeygd edg

im trying to creat a pruct popup dialog type thing with an image and a discrition on the left

medyum

February 19th, 2010

Good Collection but needs to be updated some pages mention are not available

Ebnat's Syukur

May 8th, 2010

Goood collection and Thanks for recomendation

joao

June 17th, 2010

nice jquery’s man!

volkan

September 9th, 2010

great jquery collection

noonoob

September 16th, 2010

thank you very much, jquery is the best

Hello

October 25th, 2010

A modal Window to return a value selected from from it into a form field in the parent page form

Lulu Mishra

December 1st, 2010

Really JQuery is best

mojtaba

December 21st, 2010

thanks my friend
your toturial is the best!
great

James Radford

December 24th, 2010

thanks for sharing, this is very useful.
James

HG

December 28th, 2010

I personally don’t think these are lame at all. While there are a couple that don’t suit me, most of these are good to simply be aware of in the event you might need some inspiration or help finding a solution to a design problem. Just because some are conceptual or rough doesn’t mean they are useless.

Thanks for sharing!

Kai

January 11th, 2011

Thank you sooooo much, you are the best!!!!

prasad

January 29th, 2011

thanks for sharing the components.

kirpi

February 5th, 2011

I was looking for a couple of tricks to use on my website, and found them here. I’ll now try and see how to hack into them. Thank you!

Damian

February 11th, 2011

A great collection of really useful JQuery. Thanks mate

saurabh gupta

February 26th, 2011

nice…!! thanks…for it..!! good collection.

Michael

March 19th, 2011

The jQuery Slider Gallery does not work with any modern version. I found one that is similar that does work.

http://www.ajaxera.com/jquery-updated-slider-gallery/

medyum

April 16th, 2011

I was looking fro something like this to enhance my current theme. timely hit!!….

David

May 18th, 2011

Thank you so much for the information!

ravi parmar

May 23rd, 2011

thnks ……nice collection.

resim

July 19th, 2011

Thanks you i am using in my web site!

Max Manus

August 22nd, 2011

Fundametal tutorial, thx

Jason Curby

September 27th, 2011

Thanks for sharing, some great techniques here.

Mark Willam

October 21st, 2011

Awesome post
Thank you for Sharing!

Guy Nakash

November 2nd, 2011

Excellent!
Thank you so much.

May I add another one: SlipSlap!
It’s a full CSS3 and JQ plugin, looks great and works like a charm.

http://www.the-puzzle.co.il/slipslap/

elive

October 9th, 2012

thank so much! nice list!

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify