Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

50 Fresh jQuery Tutorials 2011

DZone's Guide to

50 Fresh jQuery Tutorials 2011

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

Today, we are going to introduce 50 Fresh jQuery Tutorials of 2011 that were recently created, so you don’t have to do the search that we did. This list should help you build a useful library of jquery plugins and solutions.

1. Parallax Slider with jQuery

Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
jquery tutorials

View Live Demo

2. Animated Form Switching with jQuery

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
jquery tutorials

View Live Demo

3. Sweet Thumbnails Preview Gallery

In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
jquery tutorials

View Live Demo

4. How To Create a Cool Animated Menu with jQuery

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.
jquery tutorials

View Live Demo

5. How to Make Auto-Advancing Slideshows

One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery

.

jquery tutorials

 

View Live Demo

6. Digg Like URL Submitter Using JQuery and PHP

Today I want to create something that fetching the submitted url data, some kind that many social bookmarking have, beside facebook, the other famous one is digg, this image below is something that I share in this post.
jquery tutorials

View Live Demo

7. Simple JQuery Flickr Style Tooltip Menu

In today post I try to create the flickr style tooltip drop down menu, I mean the drop down menu when you see in the detail image page, the challenge creating this feature is the CSS, that contains gradient and manipulating box so that can look like a triangle in the tooltip menu after the main menu clicked.
jquery tutorials

View Live Demo

8. Shuffle Between Images Using JQuery

Shuffle mean changing the position between each items position, I continue this shuffling images feature so that can be added to my previous post about creating collage image gallery using jquery, and better can be added with rotating feature too. I’m using the same layout and images position like before.
jquery tutorials

View Live Demo

9. JQuery Expand Stacked Images Using Slider

This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the JQuery UI slider
jquery tutorials

View Live Demo

10. Thumbnails Preview Slider with jQuery

In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.
jquery tutorials

View Live Demo

11. jQuery’s Data Method – How and Why to Use It

jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean. As of jQuery 1.4.3 we also have the ability to use the method on regular JavaScript objects and listen for changes, which opens the doors to some quite interesting applications.
jquery tutorials

View Live Demo

12. Spotlight: jQuery replaceText

Every other week, we’ll take an ultra focused look at an interesting and useful effect, plugin, hack, library or even a nifty technology. We’ll then attempt to either deconstruct the code or create a fun little project with it.
jquery tutorials

View Live Demo

13. XML banner fader in jQuery

More jQuery animation! This one puts a fading set of banners on your page. It uses simple XML to tell the javascript what banners to pull in, and the URLs you want the banners to link to. This is ideal for linking to top featured stories.
jquery tutorials

View Live Demo

14. Overlay-like Effect with jQuery

Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.
jquery tutorials

View Live Demo

15. Fullscreen Gallery with Thumbnail Flip

In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
jquery tutorials

View Live Demo

16. Making a Flickr-powered Slideshow

Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events
jquery tutorials

View Live Demo

17. Converting jQuery Code to a Plugin

When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this – your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse.
jquery tutorials

View Live Demo

18. jQuery draggable captcha

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.
jquery tutorials

View Live Demo

19. Rounded Menu with CSS3 and jQuery

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.
jquery tutorials

View Live Demo

20. Jquery Advanced Ajax validation with CAPTCHA

jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. In this tutorial I’m going to teach you how to create a signup form with advanced AJAX validation and CAPTCHA.
jquery tutorials

View Live Demo

21. Populate Select Boxes

It’s the age old (well, in webby terms) issue of how to populate one select box based on another’s selection. It’s actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax.
jquery tutorials

View Live Demo

22. Spotlight: Constrained Stickies with jQuery

Today, we’re going to take a look at a plugin that implements a pretty neat effect — it’s pretty hard to explain in a sentence so you may as well click on the continue button to get started after the jump.
jquery tutorials

View Live Demo

23. Fun with jQuery Templating and AJAX

In this tutorial, we’ll take a look at how jQuery’s beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. We’ll also take a quick look at jQuery 1.5′s completely revamped AJAX module.
jquery tutorials

View Live Demo

24. Yahoo Instant Search with Jquery and Ajax

Yahoo instant search implementing with Yahoo Search Boss API using jquery and ajax. This is very similar to my previous post just changing few lines of code. I feel Yahoo search results better than Bing results. Use it and make your own search application.
jquery tutorials

View Live Demo

25. Gravity Registration Form with Jquery

Sometimes registration form decides your web application success rate, I feel the first step(registration) should be less fields and eye catching it will surely impress the users. I had designed a new style registration form with gravitational effect. I hope you like this. Thank you!
jquery tutorials

View Live Demo

26. Moving Boxes Content with jQuery

Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.
jquery tutorials

View Live Demo

27. Expanding Image Menu with jQuery

In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.
jquery tutorials

View Live Demo

28. Animated Content Menu with jQuery

Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.
jquery tutorials

View Live Demo

29. How to Make a Slick Ajax Contact Form with jQuery and PHP

This tutorial shows you how to build a nice-looking, smooth contact form that visitors can use without having to leave the page they're reading.
jquery tutorials

View Live Demo

30. How to Make an Elegant Sliding Image Gallery with jQuery

Learn how to build a nice-looking sliding photo gallery using JavaScript and jQuery. Full code download included.
jquery tutorials

View Live Demo

31. Drag-and-Drop with jQuery: Your Essential Guide

Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.
jquery tutorials

View Live Demo

32. Creating a 5 star rating system using jQuery, PHP and MySQL

In this tutorial we will create a simple 5 star rating system using jQuery, MySQL, PHP and AJAX. We will use jQuery to highlight the star the mouse is over and the preceding stars, AJAX to send the vote to the server, PHP to process the vote and MySQL to store the vote.
jquery tutorials

View Live Demo

33. Jquery Memory Game

Today I want to create a simple traditional memory game based on JQuery this example using only client side scripting, most people already know how to play this game, usually this game using some card, we must find the same card in two sequential time, if we found it the card would opened until we have all the card empty.
jquery tutorials

View Live Demo

34. JQuery Collapsible Load Scroll

Almost all blogger using twitter, right now I always open twitter in one of my firefox tab, sure I never check everyone newest status forever maybe I just check it once in two or four hours, and sometimes I off from twitter for one or two days.
jquery tutorials

View Live Demo

35. Making a Custom Facebook Wall with jQuery Templates

In this tutorial, we are going to create our own version of Facebook’s wall. We will be using Facebook’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.
jquery tutorials

View Live Demo

36. Drag and Drop Buttons-Tutorial-Jquery January 2011

Hello all :) This is my first tutorial on this site Hope you like this. We are creating a set of element which hold drag and drop capability:
jquery tutorials

View Live Demo

37. Simple JQuery Slideshow

In this tutorial we're going to use jQuery to make a slideshow
jquery tutorials

View Live Demo

38. Drag Drop Shopping Cart Using JQuery

There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by javascript.
jquery tutorials

View Live Demo

39. Create Delicious Tag Field Using JQuery

Delicious is one of the popular social bookmarking, it make us easier to save our important links, and I amaze cause how easy to use tagging field when we want to save new link, right now I want to create something like that, well actually not really similar, I’m not implemented all the features.
jquery tutorials

View Live Demo

40. Simple Vote Using JQuery Animate

This is a very short post and simple idea to use JQuery animate function in voting system, I post this maybe it will useful for replacing voting system that using many images, the idea is just expanding the div element (css width property) using animate function, we just need to add the same value on the width element.
jquery tutorials

View Live Demo

41. JQuery Typing Game

Continue from my previous post, about detecting character in jquery, now try to some more sophisticated example, this game inspired by an old shark typing game, which is created by pop cap game, but it seems not available anymore.
jquery tutorials

View Live Demo

42. Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
jquery tutorials

View Live Demo

43. Drag and Drop Template Management System with Jquery

I have been developing Template (User Interface) management system with drag and drop panel support for my future project. In this post I want to explain how to design database tables and implementing grids drag and drop usability with jqueryUI plugin. Using this system your web project will prove a choice to the end-user, they can manage their own template interface.
jquery tutorials

View Live Demo

44. Better Check Boxes with jQuery and CSS

In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
jquery tutorials

View Live Demo

45. Live Table Edit with Jquery and Ajax

I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!
jquery tutorials

View Live Demo

46. Multiple Ajax Requests with Jquery

Last few days I have been working with APIs for instant search results, I had an idea to implement a super instant search with multiple APIs like twitter, youtube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, luckily I had found Jquery 1.5 has released a new method called $.when finally I have developed super fast search at kokkoroko.com.
jquery tutorials

View Live Demo

47. Shutter Effect Portfolio with jQuery and Canvas

In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.
jquery tutorials

View Live Demo

48. Bing Instant Search with Jquery and Ajax

Some days back I had posted a popular article 'Youtube instant search with Jquery and Ajax'. I received a lot of request from my readers that asked to me how to instant web search results so I had coded Bing instant search with real time search results. Just few lines of code, reading Bing search JSON API file with Jquery.
jquery tutorials

View Live Demo

49. Facebook Graph API Connect with PHP and Jquery

Last few days I have been working on labs.9lessons to connecting Facebook Graph API access token system, it’s very interesting. This post I had presented in easy way to connect and read the Facebook home timeline with PHP and Jquery. Explained how to store facebook token and user id hope you like it. Thanks !
jquery tutorials

View Live Demo

50. PHP Captcha Code

In this tutorial I want explain how to create a Captcha in PHP. We are using some of the features available in PHP for creating an image. This is very simple and basic tutorial and we are not using any custom fonts for generating captcha image. And we aleready know that captcha code used to avoid spam/abuse or auto-submission.

jquery tutorials

 

View Live Demo

From: Fresh Jquery Tutorials


This article was reposted from: http://webdesign14.com/50-fresh-jquery-tutorials-2011/

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}