Archive for the ‘jQuery’ Category

Amazing Multi Style Menu w/ jQuery and CSS

14

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

In this post I’ve selected 14 jQuery navigation menu tutorials that you can learn from them how to impalement your own jQuery based navigation and have some great effects.

Make a Smooth Animated Menu with jQuery

Download – Demo

Animated Menus Using jQuery

Download – Demo

Tutorial: How to Create Your Own “kwicks”Effect with jQuery

Visit Tutorial – Demo

Tutorial: Create a Cool Animated Navigation with CSS and jQuery

Visit Tutorial – Demo

Playing with jQuery Color Plugin and Color Animation

Download – Demo

Create a Realistic Hover Effect with jQuery

Visit Tutorial – Demo

Tutorial: How to Load and Animate Content with jQuery

Visit Tutorial – Demo

Tutorial: How to Create an apple style menu and improve it via jQuery

Visit Tutorial – Demo

Sexy Drop Down Menu w/ CSS & jQuery

Visit Tutorial – Demo

Rollovers and tooltips with jQuery

Visit Tutorial – Demo

Tutorial: How easy to create a slide tabbed box using jQuery

Visit Tutorial – Demo

Animated tabbed content with jQuery

Visit Tutorial – Demo

Sliding Top Menu With jQuery

Visit Tutorial – Demo

Tutorial: Fading Menu & Content Replacing with jQuery

90+ Useful jQuery Plugins for Designers and Developers

jquery-useful-plugins-designers-developers

jQuery can help designers and developers create impressive animations and interactive websites that are appealing and accessible to the widest range of browsers.

Here are 90+ useful jQuery plguins focusing on gallery and slideshows, navigations and further resources to reduce time and effort while increasing your audience.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

Accessibility

Stylesheet and text size switcher.

Accordion

Accordion interface with a few variations.

AlphaNumeric

Prevent users from inputing special characters.

Ajax File Upload

Loading graphic displays while file is uploaded.

AppendDom

Write HTML with JavaScript, great for displaying Ajax results.

AppendText

Converts text into post friendly html.

BlockUI

Create a message overlay while blocking user interaction on elements or the entire page.

BogoFolders

View text through a ‘file menu’ interface.

BogoTabs

Basic tabbed interface.

Bubble

Demo highlights selected table rows in groups of tables..

Calendar
Aids date entry.

Checkbox manipulation
Select, unselect and toggle checkboxes.

Chili

Syntax highlighting for displaying code on webpages.

Choose Component
Select data from a table row through a modal window.

Click Menu
Generates dropdown menus.

clueTip
Tooltips with many variations.

Color Animations
Add color animations to div backgrounds.

Color Picker
Pass in color choices and attach custom events to each color block.

columnHover
Highlight table rows and columns.

columnManager
Add, remove and toggle table columns.

ContextMenu
– Menus that show when you right click specified elements.

Confirmer
Adds a listener to check if user confirms their action.

Cycle

Add flash-like image effects to rotating image galleries.

date picker
Aids date entry.

Delicious
Read delicious bookmarks from a user to display on a webpage.

Dimensions
Get accurate window and document attributes across browsers.

Equalize Columns
Make columns the same height as the longest column.

FCKEditor Plugin
Adds a rich text editor to a textarea.

Field
Expand the ability to retrieve and set values in forms.

Form

Change HTML forms to submit via Ajax.

Gallery Viewer
JavaScript image gallery.

getUrlParam
Function to get url parameters.

Google Feed Plugin
Display any RSS feed to a webpage.

Gradient
Adds a gradient to a div without needing an image.

Grid Column Sizing
Table column draggable resizing.

Grid Row Sizing
Expand and collapse table rows.

hoverIntent
Prevents unintended hover events.

idTabs
Add tabbed interface to a website.

Impromptu
Create modal windows and messages.

jQuery Localisation
Applies localisation packages based on the user’s language preference.

jBox
UI dialog widget.

jCalendar
Aids selecting of dates inline on a page.

jCarousel Lite
Simple carousel for images and HTML content.

jCodeViewer
Syntax highlighting for displaying code on webpages.

jdMenu Hierarchical Menu
Generates dropdown menus.

jEditable
Live editing of elements on a webpage.

jFeed
XML feed parser.

jPanView
Replaces big images with a zoom viewer in HTML.

jqDnR
Drag’n’Resize elements on a page.

jQMaps
Interact with Google maps.

jqModal
Display notices, dialogs, and modal windows in a web browser.

Treetable
Make a tree view out of an HTML table.

Tree View

Tree view controls.

Suggest
Add autocomplete to input fields.

YAV
Form validation library.

jqUploader
Provides a status bar for uploading images.

jScrollPane
Customize your scrollbars.

jTagEditor

Turn a textarea into a tag editor.

jVariations
Create a control panel to manipulate elements on a page.

Keyboard Navigation
Dynamically determine which element to focus on based on it’s position on the screen.

labelOver
Overlay labels over an input field.

LavaLamp
Navigation menu with a ‘lava’ effect.

Lazy Load
Only load images that are in the current window.

Live Query
Adds event listeners to elements.

Masked Input
Add mask to inputs to aid user data entry (phone numbers, etc).

Media

Unobtrusive conversion of standard markup into rich media content.

Extra selectors for JQuery
Add more selectors to jQuery.

Mousewheel
Mousewheel event handler.

Mousehold Event
Add repeating event as the user holds down the mouse.

Multiple File Upload
Select multiple files one by one as it adds to a queue list.

newsticker
Create a fading news ticker.

Password Strength Meter
Indicator to show the strength of a users password.

PopupWindow
Creates an preview popup of destination link.

Query String Object
Useful for sending URL parameters.

Select box manipulation
Remove and add options from a select list or dropdown in many ways.

selectCombo
Tool for making dependant dropdowns with Ajax.

Star Rating
Generates star rating from input fields

Grid
Dynamic ajax grid control.

slideViewer
Image gallery as slides.

Spoilers
Hide content behind an image until user action is taken.

tableHover
Row and column highlighting with variations.

tableFilter
Search box is added to each column header to filter table.

tablesorter
Client side table sorting.

Taconite

Easily make multiple DOM updates using the results of a single AJAX call.

Textgrad
Add gradients to whole blocks of text.

Time Entry
Sets an input field up to accept a time value.

Tooltip
Add tooltips from title page.

Validation

Add live validation to forms.

WYMeditor

Web-based XHTML WYSIWYM editor.

Zoomi
Zoomable thumbnails.

XSLT
Transform XML/XSL from JavaScript.

XAP
Ajax library.

14 Fresh jQuery Plugins Focusing On Image Gallery And Slideshows

Sliding Image Gallery jQuery Plug-in

PrettyPhoto jQuery Lightbox Clone

The Lightbox Clones Matrix

Full screen image gallery using jQuery and Flickr

Moving Boxes

Start/Stop Slider

Pirobox V.1.2.1

jQuery spherical panorama viewer

Zoomimage – jQuery plugin

jQuery Panel Gallery Plugin

jQuery Image Overlay Plugin

imgAreaSelect

CrossSlide jQuery plugin

JQZoom

10 Incredible JQuery Navigation Menus

Animated Drop Down menu with JQuery

A DropDrown menu is often a good choice when you have many items to display. In such cases, what about animating it?

Source

iPod style menu

The iPhone is indeed a very good example of minimalistic, but great looking, design. This article will teach you how you can easily achieve the same effect on any website, using the power of JQuery.

Source

Superfish – jQuery menu plugin

Superfish is a JQuery plugin especially dedicated to menus. It allows many improvement from what you can achieve with HTML and CSS as such as hover support for IE6, animations, keyboard accessibility and more.

Source

Lavalamp for JQuery lovers

Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement.

Source

How to make a smooth animated menu with JQuery

A very nice tutorial to learn to create a very nice and artistic effect for your websites.

Source

Navigation effect using JQuery

Another “Great to read, Simple to implement” JQuery tutorial. Its purpose is to teach you recreating MooTools homepage menu…using JQuery!

Source

Animated JQuery menu

Among other things, JQuery is very useful for an easy manipulation of the CSS background-positionproperty. This tutorial is a perfect example to illustrate that possibility.
Althought this menu is not, in my opinion, the best looking of this article, it has always be a client’s favorite.

Source

How to create a vertical sliding JQuery menu

Like the dropdown menu that you can see at the top of most Envato sites? If yes, this tutorial will allow you to learn how to create a similar kind of menu. Your clients will love it, there’s no doubt about it. And even better, the tutorial will also teach you how to design that kind of menu using Photoshop.

Source

Apple menu, improved

Who doesn’t like the look and feel of the Apple website? One year ago, we released a nice tutorial to help you recreating Apple’s website menu.
This new tutorial, provided by Kriesi.at, will teach you how to recreate Apple’s menu, and even better, how to enhance it it using JQuery.

Source

Using jQuery for Background Image Animations

I already talked about how great JQuery is for animating background using the background-positionCSS property. This article is very great to improve your skills in that domain.

Source

Animated Background Image With JQuery

Getting ready

In this tutorial, we are going to create a simple layout for a website, which includes a very cool animated background. Here is how the final result will look:

http://www.catswhocode.com/blog/animated-background-image-with-jquery


37 Fresh jQuery Image And Gallery Display Solutions

Query is already very popular because it is very fast and concise Javacript library simplifing and different event handling, smooth animation with very little code. With jQuery you can enjoy new way of web development and image galleries are the best way to use it effectively! Here you’ll have more than 35 different unique jQuery Javascript solutions for beautiful image galleries and great ways to display your images with light code.

To make it even easier for you to choose, I also added live demo link under every jQuery plugin! However if you are searching for even more alternatives with Flash, plain CSS or another Javascript library, check out this post –57+ Free Image Gallery, Slideshow And Lightbox Solutions.

1. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.

flow-gallery-jquery-image-slideshow-tools-free

View Demo

2. GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

gallery-view-jquery-image-slideshow-tools-free

View Demo

3. Sliding Image Gallery jQuery Plug-in

The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).

sliding-gallery-jquery-image-slideshow-tools-free

View Demo

4. PrettyPhoto jQuery Lightbox Clone

PrettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

prettyphoto-gallery-jquery-image-slideshow-tools-free

View Demo

5. Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

beautiful-gallery-jquery-image-slideshow-tools-free

View Demo

6. AD Gallery – a jQuery gallery plugin

A highly customizable gallery/showcase plugin for jQuery.

ad-gallery-jquery-image-slideshow-tools-free

View Demo

7. FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

fancybox-gallery-jquery-image-slideshow-tools-free

View Demo

8. Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

shadowbox-gallery-jquery-image-slideshow-tools-free

View Demo

9. Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

galleriffic-gallery-jquery-image-slideshow-tools-free

View Demo

10. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3.

colorbox-gallery-jquery-image-slideshow-tools-free

View Demo

11. The Lightbox Clones Matrix

Comparison of various scripts that display images and other objects in somehow cool CSS popups

lightbox-clones-jquery-image-slideshow-tools-free

12. Full screen image gallery using jQuery and Flickr

It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It also supports a flickr search engine, thumbnails, captions, preloader and some other goodies.

fs-gallery-jquery-image-slideshow-tools-free

View Demo

13. Moving Boxes

moving-boxes-gallery-jquery-image-slideshow-tools-free

View Demo

14. Creating a Slick Auto-Playing Featured Content Slider

featured-slider-jquery-image-slideshow-tools-free

View Demo

15. Start/Stop Slider

start-stop-gallery-jquery-image-slideshow-tools-free

View Demo

16. SlideViewerPro 1.0

SlideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

slide-viewer-jquery-image-slideshow-free-tools

View Demo

17. Pirobox V.1.2.1

pirobox-gallery-jquery-image-slideshow-tools-free

View Demo

18. s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

s3slider-gallery-jquery-image-slideshow-tools-free

View Demo

19. CSS and Jquery – Creating an Image Slider

slider-gallery-jquery-image-slideshow-tools-free

View Demo

20. Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

rotator-gallery-jquery-image-slideshow-tools-free

View Demo

21. jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

panorama-gallery-jquery-image-slideshow-tools-free

View Demo

22. Zoomimage – jQuery plugin

Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.

zoom-gallery-jquery-image-slideshow-tools-free

View Demo

23. Building a jQuery Image Scroller

scroller-jquery-image-slideshow-tools-free

View Demo

24. Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content

cssglobe-gallery-jquery-image-slideshow-tools-free

View Demo

25. jQuery Panel Gallery Plugin

No slicing or editing of the images is needed
It’s just 5K
Easily configurable
Reusable on multiple containers

No slicing or editing of the images is neededIt’s just 5KEasily configurableReusable on multiple containers

panel-jquery-image-slideshow-free-tools

View Demo

26. Supersized – Full Screen Background/Slideshow jQuery Plugin

supersized-gallery-jquery-image-slideshow-tools-free

View Demo

27. Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.

pikachoose-jquery-image-slideshow-free-tools

View Demo

28. jQuery Image Overlay Plugin

The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover, as you can see above.

overlay-jquery-image-slideshow-tools-free

View Demo

29. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Highly configurable

Customizable with CSS styling

Handles scaled images

Keyboard support for moving and resizing the selection

Supports callback functions

Provides API functions for easier integration with other application components

Lightweight — the packed version is less than 8KB

imgarea-select-gallery-jquery-image-slideshow-tools-free

View Demo

30. PFeloader

This is a preloader, it scans DOM and loaded StyleSheet’s for occurence of images (in sheet, style, as element).

StyleSheet file has to be in the same domain as page using it.

loading-gallery-jquery-image-slideshow-tools-free

View Demo

31. Image Reveal using jQuery

enlargement-gallery-jquery-image-slideshow-tools-free

View Demo

32. The jQuery Cycle Plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

cycle-gallery-jquery-image-slideshow-tools-free

View Demo

33. Galleria Plugin

This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.

galleria-jquery-image-slideshow-tools-free

View Demo

34. CrossSlide jQuery plugin

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.)

crosslide-jquery-image-slideshow-tools-free

View Demo

35. Fancy Thumbnail Hover Effect w/ jQuery

fancy-gallery-jquery-image-slideshow-tools-free

View Demo

36. Apple-like Slideshow Gallery

apple-gallery-jquery-image-slideshow-tools-free

View Demo

37. JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

jqzoom-gallery-jquery-image-slideshow-tools-free

View Demo

Source:  www.1stwebdesigner.com

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

Getting Started

1.7 reasons why you really should learn jQuery

7-reasons-why-learn-jquery

2. jQuery Crash Course

Introduction to Jquery, further reading and basics.

jquery-crash-course-tutorial

Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!

jquery-for-absolute-beginners-video-tutorials

4. 10 jQuery Tutorials for Designers by WebDesignerWall

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

jquery-tutorials-for-designers

5.4 Jquery Easy Tips And Tricks Tutorial

jquery-easy-tricks-tutorial

6.jQuery Essentials Presentation at MinneWebCon (102 pages)

Very well written jquery essentials presentation. Really worth the time.

jquery-essentials-presenation

7.12 Useful and Handy jQuery Tips and Tricks

ueness-useful-handy-jquery-tips-tutorials

8.Improve your jQuery – 25 excellent tips

Great tips, even some intermediate users could now know few of these.

25-excellent-tips-jquery-tutorial

9.Build An Incredible Login Form With jQuery

In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.

sliding-panel-login-form-jquery-tutorial

Demo

10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast

photo-admin-site-jquery-php-tutorial

11.Building a jQuery-Powered Tag-Cloud

jquery-tag-cloud-tutorial

12.WordPress Sidebar Turned Apple-Flashy Using jQuery UI

This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.

wordpress-sidebar-apple-flashy-tutorial-jquery

Demo

13.How to Load In and Animate Content with jQuery

animate-content-with-jquery

Demo

14.Create a Slick Tabbed Content Area using CSS & jQuery

slick-tabbed-content-area-tutorial-jquery

Demo

15.Styling Buttons and Toolbars with the jQuery UI CSS Framework

Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

styling-buttons-and-toolbars-jquery-tutorial

Demo

16.jQuery Slideshows With the Cycle Plugin

The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.

jquery-slideshow-cycle-plugin-tutorial

Demo

17. InnerFade with JQuery

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.

innerfade-with-jquery-tutorial

Demo

18.Creating a Dynamic Poll with jQuery and PHP

jquery-poll-php-tutorial

Demo

19.Setting Equal Heights with jQuery

setting-equal-heights-jquery-tutorial

Demo

20.jQuery Tools: Scrollable

Scroll your HTML with eye candy

scrollable-jquery-tutorial

Demo

21.jQuery Tools: Tooltips

tooltip-jquery-tools-tutorial

Demo

22.jQuery Tools: Overlay

Yet another, beautiful image displaying way – similar to popular Lightbox, but this one seems to be more elegant.

overlay-jquery-tools-tutorial

Demo

23.jQuery Tools: Expose

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.

expose-jquery-tools-tutorial

Demo

24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast

amazing-music-player-jquery-tutorial

Demo

25.Create an Amazon Books Widget with jQuery and XML

amazon-books-widget-jquery-tutorial

Demo

26.Creating a “Filterable” Portfolio with jQuery

This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.

filterable-jquery-portfolio-tutorial

Demo

27. jQuery Hover Sub Tag Cloud

jquery-sub-tab-cloud-tutorial

Demo

28. How To Build Quick and Simple AJAX Forms with JSON Responses

contact-form-ajax-jquery-tutorial

Demo

29. Simple jQuery Spy Effect

jQuery Spy Effect scrolls the list in a beautiful way.

jquery-spy-effect-tutorial

Demo

30. Slider Gallery Tutorial: Screencast

A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

slider-gallery-jquery-tutorial

Demo

31. Semantic Blockquotes with jQuery

Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.

semantic-blockquotes-jquery-tutorial

32. Jcrop – the jQuery Image Cropping Plugin

jquery-image-cropping-plugin

Demo

33. Horizontal Scrolling Menu made with CSS and jQuery

horizontal-scrolling-menu-jquery-tutorial

Demo

34. jQuery Sequential List Tutorial

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

sequential-list-jquery-tutorial

Demo

35. How easy to create a slide tabbed box using jQuery

howto-slide-tabbed-box

Demo

36. How to Mimic the iGoogle Interface

This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

howto-mimic-igoogle-interface-jquery-tutorial

Demo

37. jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

jgrowl-plugin-tutorial

38. Creating accessible charts using canvas and jQuery

accessible-charts-using-jquery-tutorial

Demo

39. jQuery and Google Maps Tutorial

This tutorial will walk you through how to get started using jQuery inside the Google Maps environment.

google-maps-interaction-jquery-tutorial

Demo

40. How To Create An Amazing jQuery Style Switcher

his tutorial will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

style-switcher-jquery-tutorial

Demo

41. How-To: Reddit-style Voting With PHP, MySQL And jQuery

This tutorial will show you how to create a voting system similar to Reddit with jQuery, PHP and MySQL.

reddit-vote-howto-php-mysql-jquery-tutorial

Demo

42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

This tutorial will explain how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.

selecting-styling-external-links-jquery-tutorial

Further Reading, Advanced Tips and Tutorial Sites

43.Official Jquery Tutorial Directory

As first add is obvious, but on their official website you can find many tutorials related to mastering Your Jquery skills even in several different languages.

jquery-tutorial-site

44.LearningJquery

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. They have tutorials for all skill levels, and each entry is categorized by level of difficulty.

learning-jquery-tutorial-website

45.15 Days Of jQuery

Examples and tutorials to help you learn JQuery – it hasn’t been updated for a while, but still a lot of useful articles you’ll find there.

15-days-of-jquery-tutorial-website

46.jQuery for Designers

Learn how easy it is to apply web interaction using jQuery – beautiful tutorials and website, if you still can’t find what you need, you can even request a tutorial.

jquery-for-designers-tutorial-website

47.Ultimate Jquery List

jQuery Ajax tutorials to jQuery UI examples, you’ve found the ultimate list of tutorials and plugins for jQuery! Everything from Ajax file uploaders to RSS feed plugins, all on one of the longest pages you’ll ever scroll.

ultimate-jquery-library

48. Bassistance

This blog is about programming (with focus on web applications and JavaScript), musicand other stuff the author happens to write about. It’s also the home of several jQuery plugins.

bassistance-jquery-website

49. Remi Sharp’s Blog

Site with several good tips and articles related to jquery, also the same man behind useful tutorial site – jQueryForDesigners I showcased above.

remi-sharp-blog-jquery-articles

Online jQuery Cheat Sheets

50.VisualJquery 1.2.6

An online cheat sheet and visual reference to Jquery, where you can find Jquery functions well explained, updated to jQuery 1.2.6. version. While playing with Jquery, this website seems to be a very useful place to visit.

visual-jquery-online-cheat-sheet

51.jQuery 1.2 cheatsheet wallpaper

The size of wallpaper is 1280×960, two color variations.

jquery-cheat-sheet-wallpaper

52.jQuery 1.2 Cheat Sheet (*pdf file)

jquery1

53. ColorCharge Jquery CheatSheet

jquery-cheat-sheet-colorcharge