12 Outstanding JQuery Resources & Tutorials

Since it first began, jQuery has had a thoughtful effect on the web design world. Its famed slogan, "write less, do more", exemplifies its true nature and aptitude. Throughout the past year, hundreds of thousands of jQuery tutorials and resources have been released. They range from a simple HTML change to dynamic sliders and charts.

Below we present 15 Outstanding JQuery Resources & Tutorials which we have hand-picked from the wide variety of articles. These resources not only help you accomplish remarkable things, but they do it with style and elegance.

1. Thumbnail Hover Effect

Lately I was checking out some nice flash galleries and came across an consequence that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I'd share this and maybe some of you can find it useful.

2. JQuery Image Scroller

In this tutorial, we're going to be building an image scroller, making use of jQuery's outstanding animation features and usually having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them though 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 entirely independent and will begin scrolling once the page loads.

3. JQuery iCal Calendar

You may often see some websites displaying a ordinary look of calendar simply to give information to the visitors of what the date or what day is today and it is also moderately without additional uses. Stefano Verna has brilliantly written a jQuery tutorial to create iCal-like calendar.

This calendar is built using HTML -table- structure and stylized with smart CSS syntax. You'll need to use a single faultless image for all the graphics which represented each date in one meticulous month. The CSS allows you to add hover effect, styling the font and more options in defining the size of your calender. Whilist, the The jQuery is responsible to bring the Coda FX like. It will soon give you a stylish ical-style where you can mark any date with some tip-events.

For more play-up, visit the source page and the demo to start building your custom i-cal like calendar and find a good use of it!

4. Uses of jQuery

There have been abundance of posts on the number of overwhelming jQuery plugins and where to find them. However, sometimes it is finest not to rely on third party plugins and resources. Do it yourself the old fashioned way! Today, we will have a look at 20+ creative uses of jQuery in modern day websites and applications; sure to motivate you for your next project.

5. Image Menu

I have always consideration that imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I've come up with using the power of jquery javascript.

6. Favicon For Outgoing Links

External links should always be marked distinctly in order to see them easily. First I thought adding a CSS class to all a[href^=http] will be more then fine. After that I got the better idea of using the favicon.ico of the external site, if it is available of course. Here is the code:

7. Drag And Drop

After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag'n drop & saving the new positions to the database was working".

Drag'n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

8. Content Slider

There are a ton of tutorials already out there about creating content sliders with jQuery.  So why bother writing another one? While I don't think that the existing tutorials are incorrect, bad, or otherwise unacceptable, I haven't found one that met my needs.

9. JQuery Gestures

I'm still working on the redesign, but from time to time I like to take a break and work on a one night project. Today's project was enthused by this article. Although I loved the idea, I establish it lacked several things :

10. JQuery Favelet For Documentation

My jQuery knowledge isn't quite to the level of my MooTools so I rely quite a bit on the jQuery documentation. When I look at articles with jQuery code in them, I'll periodically see functions I hadn't seen before and want to learn more about. What's annoying is bringing up a new tab and navigating to the docs. I've created a javascript favelet/bookmarklet that does that for me.

11. JQuery Scroller

The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need.

The advantage of using jquery.scrollable compared to "normal" browser scrolling is that you don't see the browser's default scrollbars, and you can perform scrolling in much more visually sophisticated ways, like in the above example. The main design goals of the library are to provide visual customization functionality and programmability. Here are some example scenarios where you will benefit from using the library.

12. JQuery Charts

Here is the Javascript using jQuery that fetch and format the data to be processed by Flot.