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.
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!
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.
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:
After publishing ScheduledTweets yesterday, I received e-mails asking “how the drag’n drop & saving the new positions to the database was working”.
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 :
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.