40 Exceptional jQuery Interface Techniques and Tutorials
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
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.
2. Simple jQuery Modal Window Tutorial
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.
3. Building modal panels with jQuery
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.
Tool Tips
4. Build a Better Tooltip with jQuery Awesomeness
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.
5. Smart Tooltips with jQuery
This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.
6. Coda Popup Bubbles
This excellent jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.
Module Tabs
7. Create a Slide Tabbed Box using jQuery
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.
8. Create a Tabbed Interface Using jQuery
This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.
9. jQuery Tabbed Interface
This excellent tutorial is yet another variation to the popular tabbed interface.
10. jQuery Tabs
This tutorial is in screencast format and is aimed at beginners and designers.
Showcasing Images
11. Create Sliding Image Caption with jQuery
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.
12. Image Cross Fade Transition
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.
13. A Basic Image Gallery – The jQuery Way
Create a basic image gallery by leveraging the strengths of jQuery in traversing the DOM and in DOM manipulation.
14. Image Reveal using jQuery
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).
15. Inline Image Enlargement with jQuery
This jQuery tutorial shows you a slick and animated method for enlarging thumbnail-sized photos when the user hovers on them.
16. Slider Gallery
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.
17. Simple jQuery Image Slide Show with Semi-Transparent Caption
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.
18. BBC Radio 1 Zoom Tabs
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.
19. Photo Slider Tutorial
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.
Interacting with Content / Displaying Content
20. Creating a "Filterable" Portfolio with jQuery
In this jQuery tutorial, you’ll discover a method for creating a gallery of images that can be filtered by categories.
21. How to Build a Super Duper News Scroller
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
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, %).
23. jQuery Sequential List
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.
24. Animate your message boxes with jQuery
You’ll read about a technique on how to animate message boxes using jQuery, in this excellent tutorial.
25. Create an Amazon Books Widget with jQuery and XML
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.
26. Building a jQuery-Powered Tag-Cloud
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
In this tutorial, you’ll discover an innovative technique for mimicking Digg’s now defunct Digg Spy application (here is Digg Spy’s predecessor).
28. Coda Slider Effect
Learn to create the Coda sliding content area using jQuery in this step-by-step screencast.
Web Forms
29. Improving Search Boxes with jQuery
Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.
30. Build An Incredible Login Form With jQuery
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.
Navigation Menus
31. Horizontal Scrolling Menu with CSS and jQuery
This jQuery tutorial will show you a technique for creating an impressive scrollable menu that moves based on the user’s mouse movements.
32. Fading Menu – Replacing Content
Create an animated fading navigation menu by following along Chris Coyier’s excellent tutorial.
33. Using jQuery for Background Image Animations
Johnathan Snook shows us how easy it is to create a slick, animated navigation menu by transitioning background-image position.
34. Animated Menus Using jQuery
Learn how to create this impressive jQuery-based navigation menu that has an interesting animation effect.
35. Create an apple style menu and improve it via jQuery
This interesting tutorial shows you how to create an Apple-inspired navigation menu that, when hovered over, expands the navigation item.
36. multilevel Dropdown menu with CSS and jQuery
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.
37. jQuery & CSS Example – Dropdown Menu
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
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.
39. Navigation List menu + jQuery Animate Effect Tutorial
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
Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.
Related content
- 14 jQuery Plugins for Working with Images
- 10 Promising JavaScript Frameworks
- Create a Nice, Lightweight JavaScript Tooltip
- Learning MooTools: MooTools Tutorials and Examples
- Related category/categories: JavaScript, Tutorials, User Interface
.
38 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
New View Media
January 5th, 2010
nice round up!
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
Leave a Comment