May 27

25 Powerful and Useful jQuery Tutorials for Developers and Designers

25 Powerful and Useful jQuery Tutorials for Web Developers and Designers

jQuery is all over the place these days. It’s rapidly catching up to CSS as the web template of choice for up and coming designers. It’s easy to see why. It’s constantly changing. Evolving. The only problem with this is, however, you have to constantly change and evolve as well. One simple must keep track of all of the new plugins, tutorials and addons that come down the pike. It can be quite an undertaking. Don’t worry, though. Webrulon is here to help. Here is a list of 25 recent tutorials that will get you up to speed and have you jQuery-ing in no time.

Submit A Form Without Page Refresh using jQuery
Demo URL : View Demo.
Description : This teaches you exactly what it says it does. Get rid of annoying page refreshes and let your users submit a form with simplicity and ease. Not a bad feature to have on a website. This will prevent people from clicking away in annoyance.

Live Email Validation
Demo URL : View Demo.
Description : In this tutorial you will learn how you can validate the format of an email address “live” using that crafty jQuery. It will also let you use regular expressions without any additional plugins.

Fading Menu – Replacing Content
Demo URL : View Demo.
Description : This teaches you to replace content on the fly, live. The possibilities are pretty endless here. For instance, you could use it for animation or to react live to events as they happen on your site. Not a bad thing to know.

Create a Scrolling Menu with CSS and jQuery
Demo URL : View Demo.
Description : This is exactly what it sounds like. Create a scrolling menu using CSS and jQuery. Your website isn’t classy unless it has a scrolling menu, right? Scrolling menus are the Segways of the 2010 web.

Create a live-update list effect with jQuery
Demo URL : View Demo.
Description : A live-update list effect is, essentially, a list that is generated as new data is added. This tutorial will teach you how to do it. No more outside looking in on this one.

Advanced “Poll” jQuery Plugin

Description : This tutorial will teach you how to create a jQuery plugin from start to finish. What’s the plugin do? Allows you to easily add a simple poll widget to a web page or blog. Don’t worry. Future plugins will be much more dastardly.

How to Use jQuery to Preload an Image with a Fade-In Effect
Demo URL : View Demo.
Description : There are all kinds of way to speed up, or give the illusion therein, the way images load on your website. This plugin teaches you aboutl the preloading capabilities of JavaScript while using the jQuery Framework.

Flickr Menu Design
Demo URL : View Demo.
Description : This tutorial will explain how to create a simple step-by-step way to implement a Flickr Horizontal Menu in CSS and jQuery. Now get that camera snapping.

Awesome Popup jQuery Calculator
Demo URL : View Demo.
Description : Numbers! Who needs em? Well, mostly everyone actually. This tutorial will help you keep a handle on them pesky numbers by having you build a popup jQuery calculator for your site.

Semantic Blockquotes with jQuery
Demo URL : View Demo.
Description : Blockquotes are useful in making your text visually appealing. This tutorial shows you how to create said blockquotes using jQuery. This is a fairly easy tutorial so, beginners, have at it.

Selecting and Styling External Links, PDFs, PPTs …
Demo URL : View Demo.
Description : This handy tutorial teaches you how to use jQuery to select and style PDFs, PPT, images, and external links using jQuery and CSS.

Authenticating Twitter API calls with PHP & jQuery
Demo URL : View Demo.
Description : This tutorial teaches you how to create a simple call to the Twitter API to with your site’s Twitter credentials. This makes it easy to quickly and effortlessly post topics related to your blog from your Twitter. Great for multitaskers.

jQuery Slideshows With the Cycle Plugin

Demo URL : View Demo.
Description : Wanna implement the jQuery Cycle? This tutorial shows you how. What is the jQuery Cycle? A plugin that allows developers to quickly and easily create a slideshow out of anything contained within a given div element. Cool!

jQuery and Google Maps Tutorial
Demo URL : View Demo.
Description : Using with jQuery within Google Maps can be a hefty task indeed. This tutorial seeks to lessen the burden by giving you step by step instructions. You’ll be Lewis and/or Clark in no time.

jQuery Sequential List
Demo URL : View Demo.
Description : This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. Super useful.

Using jQuery Slider to Scroll a Div
Demo URL : View Demo.
Description : This tutorial shows you how to create a horizontally scrolling div using jQuery, html, and CSS. The trusty jQuery is the main focus of this tutorial, which is used to build the slider which controls the scrolling.

How to Mimic the iGoogle Interface
Demo URL : View Demo.
Description : This tutorial teaches you how to create a customizable interface with widgets. Sound familiar? You got it. iGoogle! The finished product will be simply and minimally coded, just like iGoogle. This of course opens the doors for tons of applications.

Reddit-style Voting With PHP, MySQL And jQuery
Demo URL : View Demo.
Description : Ever been on Reddit? The site is interesting for a number of reasons, but one way is how voting is handling. A simple up or down vote is the order of the day there. This tutorial teaches you how to emulate that for your site, using jQuery, PHP and MySQL.

Simple jQuery Spy Effect
Demo URL : View Demo.
Description : A great tutorial showing how to use the jQuery Spy Effect plugin and scroll through lists in an aesthetically pleasing manner.

Create a slide tabbed box using jQuery
Demo URL : View Demo.
Description : A simple and straight forward jQuery tutorial that creates a cool sliding tabbed box. For fans of simple and clean web design.

Horizontal Animated Menu
Demo URL : View Demo.
Description : In this tutorial you will build a basic horizontal animated menu using jQuery. Nothing like the old favorites.

Load In and Animate Content with jQuery
Demo URL : View Demo.
Description : This tutorial teaches you amp up average and humdrum websites. How? By adding ajax functionality so content loads into the relevant container instead of the user having to navigate to another page. It also teaches you to use great animation effects. Double shot.

Add icons to your links automatically using jQuery & CSS
Demo URL : View Demo.
Description : This tutorial is useful if you want to attach a particular icon to a particular type of link. For example: A PDF icon can attach to all of the PDF file links, a text document icon can attach to all text document links or a zip icon can attach to all links that are linked to zip files. There are many more permutations, of course.

Creating an OS Web Interface in jQuery
Demo URL : View Demo.
Description : In this truly amazing tutorial, you will recreate a complete OS Web Interface with jQuery. Take a look at the demo. This just may blow your mind.

How To Build Quick and Simple AJAX Forms with JSON Responses
Demo URL : View Demo.
Description : In this tutorial, you will go through the steps of setting up an AJAX form, which will return a JSON response. These are used to display success and error messages. Pretty useful.