Plugins are there to assist you and let you perform the desired action in a more convenient and speedy manner. Therefore, today we decided to come up with an exciting and interesting collection of 40+ fresh and cool jQuery plugins for our reader’s convenience. This compilation is targeted at the designers and developers who want to create amazingly interactive websites that are attractive and accessible to the broadest assortment of browsers.

With these plugins, the overall experience that users come away from your sites with will be both thrilling and enjoyable. Keep in mind that navigation, galleries and slideshows, are hot points for a site to shine (or at least for the jQuery in a site to shine). So, without any further ado, here is the complete list. Enjoy!

The Plugins

MotionCAPTCHA ( Demo | Download )
MotionCAPTCHA is a jQuery CAPTCHA plugin. It asks users draft the shape they see in the canvas with the intention of submitting a form.

Smart Validate ( Demo | Download )
It is a jQuery credit card validation plugin that makes credit card format validation an easy chore. It makes sure that the user has inserted a legitimate credit card number prior to making the actual transaction. Smart Validate supports the subsequent credit cards: American Express, MasterCard, Visa, Diners Club, and Discover.

Multi Node Range Data Slider jQ Slider ( Demo | Download )
JQ Slider is a totally customizable plugin taking in style and formatting, and selection units. Powered by JQuery and JavaScript, it is based on typical JavaScript and CSS that you can modify as per your demands.

Timelinr ( Demo | Download )
Timelinr is a trouble-free jQuery plugin that assists you in providing more life to tedious timelines. It supports horizontal and vertical layouts, and you can parameterize the mass of attributes: speed, transparency, etc.

Flexible Nav ( Demo | Download )
Flexible Nav is a small jQuery library that adds a stylish navigation bar on the right of the page. It amends the web page navigation and assists in creating different sections of a document, an article, or just any web page.

Lettering.js ( Demo | Download )
Lettering.js is a jQuery plugin for radical web typography. Web type is bursting all over the web but CSS presently doesn’t present absolute down-to-the-letter control. Lettering.js solves that! Kerning type, editorial design, manageable code, and so on.

jVectorMap ( Demo | Download )
jVectorMap is a jQuery plugin utilized to illustrate vector maps and envisage data on HTML pages. It applies SVG in all contemporary browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, at the same time supplying legacy support for older versions of IE from 6 to 8 with VML.

ComboGrid ( Demo | Download )
Combogrid, similar to auto complete, when applied to an input field, allows users to rapidly find and choose from a pre-populated list of values when they type, but in a tabular and paginated method. Combogrid gives keyboard navigation support for choosing an item.

Recurly.js ( Demo | Download )
Recurly.js is a JavaScript library for custom-made transaction forms. It assists you in making safe, PCI-compliant transaction forms with completely customizable CSS.

SmartGallery ( Demo | Download )
SmartGallery is a synergistic image gallery that is particularly designed to hold up huge data. It is lightweight, lightening quick and totally customizable. Powered by jQuery, SmartGallery goes together with twelve transition effects including some matchless transition effects and thumbnail navigation.

TagBox ( Demo | Download )
TagBox is a jQuery plugin to assist put in tags like input in your forms.

jQuery Strong Password Plugin Power Pwchecker ( Demo | Download )
Power PWChecker is a free of charge jQuery plugin to help ensure secure passwords for consumers. This easy jQuery plugin can be incorporated effortlessly with any online form (sign up form/ user registration form) to check password strength and provide users clues for producing stronger, more secure passwords.

Xml Driven Vertical News Scroller Script Using jQuery vScroller ( Demo | Download )
vScroller demonstrates categorized and color-coded content in a vertical scroll. Feeds originate from standardized XML file and styled by means of simple CSS3 for a fresh and attractive interface.

Ideal Forms ( Demo | Download )
Ideal Forms is a little framework used to construct powerful and fine-looking online forms. It’s extremely simple to use and entails nominal html syntax. Completely style-able with CSS, no images required. Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+. Degrades gracefully with JavaScript disabled.

jQuery Sliding Content Bar Plugin: PushUp Content ( Demo | Download )
It is an elegant and fast content bar that you can incorporate effortlessly into any website or web application. PushUp Content Bar is trouble-free to customize and strong enough to trust in. You can put in your contact details, location map by means of Google Maps, and a straightforward contact form that visitors can employ to make contact with you.

Cuepoint JS ( Demo | Download )
Cuepoint.js is an open source plugin for adding up cue-points and subtitles to your HTML5 video.

FitVids.js ( Demo | Download )
FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Gmap3 ( Demo | Download )
gmap3 is a jQuery plugin which allows many manipulations of the google map API version 3.

Shuffle Letters Effect: a jQuery Plugin ( Demo | Download )
This is a small tutorial that demonstrates how to make a jQuery plugin that will jumble up the text content of any DOM element – an attractive effect that can be applied in headings, logos and slideshows.

Skitter ( Demo | Download )
Skitter is a plugin for producing great-looking slideshows. You can modify every aspect.

jFontSize ( Demo | Download )
The jFontSize plugin was formulated to make the process of creating the famous buttons A+ and A- easy, which modify the font size on sites with extremely big texts (for instance blogs, journals, tutorials, etc). This tool is also applied to boost the accessibility of sites, assisting people who have visual problems to see the content better.

Mosaiqy ( Demo | Download )
Mosaiqy is a jQuery plugin for viewing and zooming in on photos working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photographs are recovered from a JSON/JSONP data structure and indiscriminately moved inside the grid. All exclusive animations are taken over by your GPU on your current browsers by means of CSS3 transitions, minimizing the CPU overhead.

HTML5 File Uploads with jQuery ( Demo | Download )
It will permit people to upload photos from their computers by dragging and dropping them onto the browser window, feasible with the new HTML5 APIs used by contemporary browsers. The photographs will have a preview and a progress bar. At present, the photos are only stored in a folder on the server, but you could develop it any way you like.

jQuery PointPoint – A Plugin For Pointing To Things ( Demo | Download )
This jQuery plugin will help you draw users’ attention to a certain part of the page, in the shape of a little arrow that is exhibited next to their mouse cursor. This can be helpful for pointing to missed form fields, buttons that must be pressed, or validation errors that need to be scrolled into view.

jqZoomage ( Demo | Download )
It’s an uncomplicated zoom panel, letting your users mouse over portions of your little image, to gain a close up view. It is perfect for use on a product details page or similar.

ZOOMIFY, EXPLORE YOR IMAGES! ( Demo | Download )
If you have big images and you wish to let people explore them you can employ this tool; it includes zoom-in, zoom-out and pan functionality; it has configurable enlargement levels and it offers built-in image preloading.

JQUERY.MB.VERTICALSLIDER ( Demo | Download )
jquery.mb.verticalSlider allows you display a long list of components managing pagination, it can work with components already in the DOM of your page or loading them by means of Ajax when required. And it works with the mouse wheel of course.

jQuery Pagination revised ( Demo | Download )
The jQuery Paging plugin tries to resolve the problem of pagination in a variety of ways. It eradicates most other pagination executions by a simple and uncomplicated callback design.

Diapo ( Demo | Download )
Diapo is a free and open source jQuery slideshow plugin. You can recommend changes or enhancements if you wish. You can download it and employ it for free; you can also add it into your projects and put up for sale it as part of a larger project (donations are not required but asked to be considered in this case).

Cool Dropdown Login Form with jQuery ( Demo | Download )
This is a trouble-free jQuery dropdown login form; it’s simple to implement, lightweight, and does the whole lot you need it to.

simpleSlider ( Demo | Download )
simpleSlider for jQuery is an extraordinarily effortless and useful image-slider with a lot of effects.

Craftyslide ( Demo | Download )
Craftyslide is a small (just 2kb) slideshow built on jQuery. Craftyslide attempts to be unusual by providing a trouble-free, no-frills way of displaying images packaged into a small, fresh and proficient plugin.

jmFullWall ( Demo | Download )
jmFullWall is a jQuery plugin for the introduction of an inspiring portfolio.

Wave Display Effect with jQuery ( Demo | Download )
This plugin allows you illustrate images and content in a distinctive form – a wave. The idea is to primarily have some smaller thumbnails rotated and placed in the shape of a sine curve. As soon as you click on a thumbnail, the images will be zoomed in and you can see a medium sized version.

jQuery Widget ( Demo | Download )
jqxWidgets is a complete and inventive widget library rested on top of the jQuery JavaScript Library. It authorizes developers to deliver professional, cross-browser compatible web applications, while considerably minimizing their development time.

Elastislide – A Responsive jQuery Carousel Plugin ( Demo | Download )
Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. It uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

FlexSlider ( Demo | Download )
FlexSlider is an overwhelming, completely responsive jQuery slider plugin. It has easy, semantic markup, slide and fade animations, and is supported in all main browsers so you won’t have any compatibility problems. Flexslider is built for beginners and pros in a similar way.

Draggable Image Boxes Grid ( Demo | Download )
The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

Responsive Image Gallery with Thumbnail Carousel ( Demo | Download )
In this tutorial Codrops shows you how to generate a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to demonstrate a combination of Elastislide, we want to execute a quick to respond gallery that adapts to the view-port thickness.

grumble.js ( Demo | Download )
grumble.js furnishes special tool tips devoid of the common limitations of north/east/south/west positioning. A grumble can be revolved around a given component at any angle, all 360 degrees. Any distance can be defined. Any CSS style can be enforced. FX queues for animating multiple grumbles. And it works in IE6+, and current browsers.

Elycharts ( Demo | Download )
Elycharts is a clean JavaScript charting library, simple to use and totally customizable. It aids you in making good looking interactive charts on your web pages or web applications, with loads of useful features: legend and label support, mouse tracking, tool tips, templates, animations, and more.

spin.js ( Demo | Download )
spin.js is an inspired CSS3 loading spinner. You can amend every single parameter: number of lines, length and thickness of lines, radius, trail, speed of spinning, and whether there’s shading or not.

wordCounter jQuery Plugin ( Demo | Download )
A trouble-free word counter plugin for jQuery. When active, the counter div shows the word count from the target text field. The target could be a text area or a text box. Depending upon the choices supplied, the count could be the total amount or remaining amount of words entered into the target text field. If the negative numbers choice is furnished in that case the count will demonstrate a negative value if the word limit has been passed.

(rb)

  

Javascript is one of a web designer’s best friends. Learning how to use this powerful tool to its fullest potential can prove invaluable to our work and our clients. jQuery helps make JS more accessible. jQuery is a free, fast, and concise JavaScript library that allows you to efficiently write cross-browser javascript code to make Ajax requests, animate elements, manipulate the DOM, and do a variety of user interface manipulations.

So today we are going to look at getting started with jQuery. This is the most popular javascript library available and has an extensive community working behind it, so if you are just diving in to the JS waters, jQuery is a fantastic place to begin. Below we have prepared something of a virtual resource guide for beginners to help them on this mission.

And know that if you ever get in over your head, you can always refer back to the official jQuery documentation to help get your bearings and clear up anything you are having an issue getting a grip on.

Tutorials

jQuery for Absolute Beginners is a wonderful series of 15 video tutorials that teach you exactly how to use the jQuery library starting with downloading the library and eventually working up to creating an AJAX style-switcher.

jQuery for Complete Beginners is a series of text tutorials aimed at teaching the jQuery library from scratch. This is a currently ongoing series with 4 parts already complete.

Simple Guide: How to Get Started with jQuery is a simple beginners guide that covers what jQuery is, some of the benefits of the library and takes you through writing your first simple script.

Introduction to jQuery is one of Chris Coyier’s outstanding screencasts providing a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Marc Grabanski’s jQuery Essentials Slideshow is an extremely helpful, illustrated slideshow that will have you understanding the basics of jQuery in no time.

How jQuery Beginners can Test and Improve their Code offers some tips for optimizing your code by making small changes to significantly improve its readability and/or performance .

Websites

The Official jQuery Blog will keep you up to date on all things jQuery including details on new releases and how they improve the library.

The Learning jQuery blog offers jQuery tips, techniques and tutorials divided up into beginner, intermediate, and advanced categories. Though not a blog that updates frequently, it’s already a very large and useful resource.

jQuery for Designers is another site that publishes jQuery tutorials in every experience level. Only this site focuses specifically on applying web interactions using jQuery.

Visual jQuery is an interactive jQuery cheat sheet that provides a variety of sorting options with an in depth description for each element, many with examples.

jQuery HowTo is a blog with a collection of code snippets, tutorials, tips, and performance observations. This is another blog that doesn’t update often but has a vast backlog and quality content.

Tools

The jQuery Quick API Reference is a color coded and searchable jQuery cheat sheet that links directly to the official jQuery documentation for each element.

jQuery Tools : The Missing UI Library for the Web is a collection of the most important user-interface components for modern websites.

jQuery UI is an open source library of interface components built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

jQuery Plugins is a collection of just that, pretty much any kind of jQuery plugin you could hope to find. Complete with a forum for on the spot help when you need it.

Books

jQuery: Novice to Ninja is an easy to follow guide that will teach you to master all of the major tricks and techniques that jQuery offers. And while their claims that you can learn it all within hours may seem a bit ambitious, it’s still a great read for beginners.

jQuery Fundamentals is a creative commons (ie free) online book that features an in depth lesson on jQuery as well as an extensive collection of examples.

jQuery in Action is a highly lauded book where you will learn how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. This comprehensive guide also teaches you how jQuery interacts with other tools and frameworks and how to build jQuery plugins.

Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications.

Essential JavaScript And jQuery Design Patterns is a free ebook on design patterns which are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.

That’s a Wrap!

That concludes this gathering of jQuery resources to get you started in the Javascript game. What are your favorite or go to resources for learning this the ins and outs of this library? Where did you turn in the beginning to get a handle on jQuery? Let us know in the comments!

(rb)

  

Looking for some cool new (and free) jQuery slider plug-ins and scripts? Then here is the perfect round-up created just for you. Here, we have collected the best of the freshest jQuery plug-ins for creating amazing image and content sliders. Because all of these plug-ins come with different functionality, this guide should help you figure out which one suits you best. Let’s go!

jQuery Image And Content Sliders

Cloud Carousel (demo | download)

Here is a 3-D carousel, with optional auto-reflection that doesn’t require images to be modified or server code to be added. Accurate 3-D perspective and easy integration with basic valid HTML, all with a tiny bit of JavaScript.

ShineTime (demo | download)

“A new kick-ass jQuery and CSS3 gallery with animated shine effects.” This effect will make user interface elements look like they’re a polaroid photo (or made of glass). The best part is that it’s not that difficult to achieve.

Nivo Slider (demo | download)

Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. It simply converts a wrapper for images into a slider, and it offers nine unique transition effects.

MLB.com Content Switcher with jQuery and CSS3 (demo | download)

The goal of this project was to recreate MLB.com’s switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

Create Scrollable Interface (demo | download)

This jQuery plug-in creates a scrollable interface with which to scroll over a large image in a small area.

Beautiful Photo Stack Gallery with jQuery and CSS3 (demo | download)

The idea here is to show photo albums with a slider, and when an album is chosen, its images are displayed as a beautiful photo stack. In this stack view, you can browse through images by tucking the one on top under the stack with a slick animation.

Micro Image Gallery: A jQuery Plugin (demo | download)

Minimalistic Slideshow Gallery with jQuery (demo | download)

This simple and beautiful slideshow gallery can be easily integrated in your website. The slideshow is in a container, with options to view a thumbnail grid, pause the slideshow and navigate through the pictures. The grid slides out from above and allow the user to navigate the thumbnails.

Image Slider with Unique Effects (demo | download)

This coin-slider jQuery image plug-in has several transition effects.

Create image gallery in 4 lines of jQuery (demo | download)

Slideshow with strip effects (demo | download)

jqFancyTransitions is an easy-to-use jQuery plug-in for displaying photos as a slideshow with fancy transition effects.

Nivo Zoom (demo | download)

Nivo Zoom is a free jQuery image zoomer intended as a replacement for a lightbox.

AD Gallery, gallery plugin for jQuery (demo | download)

A highly customizable gallery and showcase plug-in for jQuery.

Animate Panning Slideshow with jQuery (demo | download)

Image Scale Carousel (demo | download)

When working with images online, keeping the aspect ratio intact is as important as anything. That is what’s so nice about this jQuery plug-in: you don’t have to worry about sizing all of your images perfectly. It auto-scales your images for you, making implementation super-simple.

Sudo Slider (demo | download)

Essentially, Sudo Slider is a slider plug-in that allows you to do whatever you want, with whatever HTML you want. It’s both a content and image slider

GALLERYVIEW (demo | download)

GalleryView is a content gallery plug-in capable of displaying any HTML content in an animated gallery view. Visit the project’s home page for documentation and demonstrations.

Jquery Plugin MopSlider 2.4 (demo | download)

MopSlider is a slider box that can contain any item with a set height and width. With version 2.5, MopSlider can be added to a page however many times you want. An auto-move function is included.

jQuery Image Scroller (demo | download)

Making use of jQuery’s excellent animation features, this image scroller is completely autonomous and begins scrolling once the page loads. The finished widget is completely cross-browser compatible and performs as expected in the latest versions of the most common browsers.

Image Gallery Using jQuery and Flickr (demo | download)

jQuery plugin: Wilq32.RotateImage (demo | download)

This is the product of the Wilq32.PhotoEffect snippet. You can use this tiny script to rotate images (at any angle) directly on the client side (e.g. with user-generated content) and animate them using your own functions.

jQZoom Evolution (demo | download)

JQZoom is a JavaScript image magnifier built on jQuery. The script makes it easy to magnify whatever you want.

Photo gallery using jQuery and VisualLightBox (demo | download)

Zoomimage (demo | download)

YoxView (demo | download)

YoxView is a free lightbox-type media and image viewing jQuery plug-in. It’s easy to use and feature-rich.

Supersized (demo | download)

This plug-in resizes images to fill the browser while maintaining their dimensions. You can cycles images and backgrounds in a slideshow with transitions and preloading. And navigation controls allow for “Pause/Play” and “Forward/Back.”

AnythingSlider (demo | download)

Photo Revealer (demo | download)

With this, you get a line of cropped thumbnails on a string. Clicking the “More Info” button expands a photograph to full size and reveals additional information. Photos are loaded on page load, so there is no waiting after clicks.

Exposure (demo | download)

Auto-Playing Featured Content Slider (demo | download)

This is an alternative to the jQuery Coda Slider plug-in. With this, a slide can be any kind of HTML content whatsoever, even a full-size image with overlay. Each slide has a unique thumbnail that, when clicked, takes you to the corresponding slide, with an arrow above indicating the active panel. And it auto-plays!

Horinaja (demo | download)

Horinaja is a ready-to-use slideshow that can be used with either Scriptaculous/Prototype or jQuery. It allows you to use the mouse wheel for navigation; when the mouse is outside of the slideshow area, it scrolls; when hovering over the slideshow, scrolling pauses.

S3 Slider (demo | download)

This one’s easy. First, enable the jQuery library, and then include the S3 Slider JavaScript in the head of the page where you want to use it.

Slide Deck (demo | download)

SlideDeck is a powerful plug-in that lets you organize any type of content into a beautiful and user-friendly slider.

Galleriffic (demo | download)

A jQuery plug-in for rendering rich fast photo galleries.

Photo Gallery – Dark Theme (demo | download)

GalleryView decides the best way to animate your filmstrip. When the gallery is wider than the filmstrip, the filmstrip remains stationary and the pointer slides from frame to frame. When the filmstrip is too long for the gallery, the pointer remains still and the filmstrip animates beneath it.

jQuery morphing gallery (demo | download)

A gallery that “morphs” images between transitions.

Simple Accordion w/ CSS and jQuery (demo | download)

Designed and implemented with usability in mind, this accordion can come in very useful when organizing a good chunk of content.

Automatic Image Slider w/ CSS & jQuery (demo | download)

Create a Slick and Accessible Slideshow Using jQuery (demo | download)

A usable and accessible slideshow widget for your website that uses HTML, CSS and JavaScript (via jQuery).

Fancy Thumbnail Hover Effect w/ jQuery (demo | download)

Coda Slider Effect (demo | download)

Simple Controls Gallery (demo | download)

Want to display images as an automatic slideshow that can be played or paused by the user? Simple Controls Gallery displays an image by fading it into view over the previous one. Navigation controls pop up when the mouse rolls over the gallery.

Popeye (demo | download)

jQuery.popeye is an advanced image gallery script built on jQuery. Use it to save space when displaying a collection of images, and offer users an elegant way to show big versions of images without disrupting the page flow.

Simple demo (demo | download)

ImageFlow (demo | download)

ImageFlow is an unobtrusive and user-friendly JavaScript image gallery.

Moving Boxes (demo | download)

SlideViewerPro (demo | download)

SlideViewerPro is a fully customizable jQuery image gallery engine that allows you to create outstanding sliding galleries or interactive galleries in blog posts.

Pirobox (demo | download)

jQuery simple panorama viewer (demo | download)

This small plug-in for jQuery will display any image on the page that has the class panorama as an interactive panorama.

A Beautiful Apple-style Slideshow Gallery (demo | download)

Flickr Photobar Gallery (demo | download)

The aim here was to build a bottom photo bar that one could easily integrate into a website. It is hidden initially and slides up when the handle is clicked. The photo sets are first shown and when one of them is chosen; all of the set’s images can be viewed as thumbnails; when a thumbnail is clicked, the full view appears as an overlay.

Step Carousel Viewer (demo | download)

Step Carousel Viewer displays images and even rich HTML by side-scrolling them left and right. Users can jump to any panel on demand or browse the gallery by scrolling through any number of panels at a time. A smooth sliding animation is used to transition between items. And don’t worry, you can tame this script to do exactly want you want: two public methods, two custom event handlers, and three “status” variables are available for this purpose.

Zoom-Info (demo | download)

Box Slider (demo | download)

jQuery Panel Gallery (demo | download)

An attractive and beautiful image slideshow plug-in, with a classic transition effect.

Image Highlighting and Preview with jQuery (demo | download)

A nice way to allow users to view bigger versions of images with some context.

Interactive Photo Desk (demo | download)

With this utility, photos can be dragged and dropped, stacked and deleted, with each action resembling a real-world action.

Multimedia Gallery for Images, Video and Audio (demo | download)

Awesome Mobile Image Gallery Web App (demo | download)

A simple mobile image gallery, using the amazing jQTouch jQuery plug-in for mobile Web development. jQTouch has native animations, automatic navigation and themes for mobile Webkit browsers like those on the iPhone, iPod Touch, G1 and Pre.

(al)(rb)

  

jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool. Apart from being a lightweight cross-browser JavaScript library that simplifies HTML and Ajax interactions for rapid web development, it also gives sites that sleek look while also representing important data in a very attractive way.

You should always keep in mind that once a user lands on your site, the fist thing s/he does is to navigate and check out the content. If your site lacks in providing the user an attractive navigation, s/he will loose interest and will be clicking on that ‘Back’ button within seconds — even if the content on the site is excellent. Hence to stand apart you need to make your menu on your site different and appealing to users.

We’ve collected some tutorials to help you understand how to give your menus that stunning visual effect and animations. Please feel free to share any sites you’ve discovered that have been developed with jQuery. Enjoy!

Scrollable Thumbs Menu with jQuery
In this tutorial you can learn how to create a fixed menu with scrollable thumbs which you can nicely control with your mouse:

Sweet Menu
Sweet Menu takes an ordinary list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system:

Creating a Fancy Menu Using CSS3 and jQuery
Here you can see how a fancy menu can be created with the help of the new CSS3 features along wth jQuey:

Rocking and Rolling Rounded Menu with jQuery
In this tutorial you can make use of the rotating and scaling jQuery patch from Zachary Johnson to create a menu with little icons that will rotate when hovering:

Slick Drop-Down Menu with Easing Effect Using jQuery & CSS
Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool:

Thumbnails Navigation Gallery with jQuery
Here is a great tutorial on how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation:

Collapsing Site Navigation with jQuery
A collapsing menu that contains vertical navigation bars and a slide out content area can be created like this:

jStackmenu
Here is a jQuery UI widget for Stack Menus. Click here to find out more:

Create Your Own “kwicks” jQuery Effect
Check out this tutorial to find out how you can create your own kwicks jQuery effect:

Overlap that Menu!
In this tutorial, you can learn how to achieve overlapping effects to your menu:

Overlay Effect Menu with jQuery
In this tutorial you can learn how to create a simple menu that will stand out once you hover over it by covering everything except the menu with a dark overlay:

jQuery Multicolor Animation Drop-Down Navigation Menu
Check out this tutorial on how to create a multicolor drop-down navigation menu with jQuery:

jQuery Floating Menu
A simple navigation menu that “follows” page scrolling and expands on mouse over — made with CSS and jQuery:

Kwicks for jQuery & a Horizontal Animated Menu
Here is a walkthrough where you can see the final result of using Kwicks. A jQuery plugin that builds a horizontal menu with a nice effect like Mootools but much more customizable and versatile:

Fading Navigation Menu
Here is a simple, neat navigation menu using CSS sprites and a bit of jQuery code to give it a visually appealing fade effect:

UI Elements: Search Box with Filter and Large Drop Down Menu
A tutorial that will show you how to create a search box with a filter and a large drop-down menu:

jQuery Convertion: Garagedoor Slider Navigation Effect
Learn how to turn your menu to jQuery and give it a Garagedoor slider navigation effect as well:

Create Bounce Out Vertical Menu with jQuery
A simple bounce out vertical menu is created here with the help of a little bit of CSS3 and jQuery Framework to create a vertical menu which on mouse hover gives a nice bounce out sliding effect:

Slide Down Box Menu with jQuery and CSS3
Learn how to create a unique sliding box navigation. The idea here is to make a box with the menu item slide out, while a thumbnail pops up:

LavaLamp Plugin
This plugin has some attractive features like targeting and container options, automatic default location, vertical and horizontal morphing:

Little Boxes Menu with jQuery
A nice display of little boxes that animate randomly when the menu item is clicked. It then expands and reveals a content area for some description or links:

Horizontal Scrolling Menu Made with CSS and jQuery
Here is a tutorial that explains how to make a horizontal scrolling menu made with CSS and jQuery:

Beautiful Background Image Navigation with jQuery
Learn how to create a beautiful navigation that has a background image slide effect. The main idea here is to have three list items that contain the same background image but with a different position:

Awesome Cufonized Fly-out Menu with jQuery and CSS3
One of our favourites! Here is a full page cufonized menu that has two nice features:

(ik)

  

There are a large amount of sites that use image sliders to emphasize content by using jQuery plugins. In today’s post we provide you with yet another collection of some fantastic resources for all of those among you who are interested in learning how to create image sliders with jQuery, and more!

jQuery Slider Plugins

Slidesjs
Slidesjs is a crazy simple slideshow plugin for jQuery. It’s easy to implement, customize and style. What could be better? With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination, and the list goes on:

Nivo Slider
A simple jQuery slider with lots of transition effects and also easy to use and implement. One of the best jQuery image sliders out there:

AviaSlider
AviaSlider is a jQuery plugin with 8 transition effects with lots of easy to set options to create your own effects including an image preloader:

Looped Slider
LoopedSlider is a plugin made for jQuery that solves a simple problem — the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from:

Coin Slider
Another jQuery image slider with unique transition effects and easy to use and implement and also compatible with most web browsers:

jCoverflip
jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set. Also, drag or click functionality enables to showcase featured content items on demand by the user:

s3Slider jQuery Plugin
s3Slider jQuery plugin is easy to use — first include the jQuery library then include the javascript in the head of the page(s) where you want to use s3Slider:

slideViewer
slideViewer is a lightweight (3.5Kb) jQuery plugin which allows you to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images:

jqGalScroll
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flick smoothly through your photos:

Easy Slider 1.5
One of the easiest jQuery plugins for sliding images and content:

Coda-Slider
Coda Slider is a jQuery content slider with left and right slide navigation along with tab-type slide navigation included:

jQuery Plugin – Feature List
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget:

Moving Boxes
Moving Boxes has been developed by CSS-Tricks — a unique kind of content slider you surely want to check. Why not give it a try now:

Coda-Slider 2.0
An interesting read. Also notice that the slider slides automatically, but will stop when the users clicks on any nav button:

bxSlider
bxSlider is a jQuery content slider and includes an image slideshow:

jQuery Easy Slides
Possibly the easiest among all jQuery plugins to use for making effective slideshows:

Smooth Div Scroll
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps:

Supersized jQuery Plugin
This is a simple full screen background slideshow plugin:

jqFancyTransitions
jqFancyTransitions is an easy-to-use jQuery plugin for displaying your photos in a slideshow along with a couple of fancy transition effects:

Galleria
Galleria is an image gallery framework written in JavaScript. The aim is to simplify the process of creating visually appealing image galleries for the web and mobile devices:

jQuery Multimedia Portfolio
This plugin for jQuery will automatically detect the extension of each media and apply the adapted player:

jQuery SerialScroll
This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, as well as combined:

Slideshow 2!
Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Try it out:

AnythingSlider jQuery Plugin
As the name already says, you can slide basically anything (images or content, or both) using this jQuery slider plugin:

jQuery Slider Tutorials

Create Featured Content Slider Using jQuery UI
Here you can learn how to create a featured content slider for your website using the jQuery UI library:

Create a Beautiful jQuery Slider tutorial
This tutorial explains how to develop jQuery sliders with image descriptions and name:

Animate Panning Slideshow with jQuery

In this tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides:

Create an Image Rotator with Description (CSS/jQuery)
This tutorial will let you learn how image rotation works and how to create image rotator with CSS and jQuery:

Using the Wonderful jFlow Plugin
A beautiful use of jFlow Plugin has been shown on Nettuts+ network. Check out this tutorial:

Slide Thumbs
In this tutorial it’s explained how to turn old boring image viewer into a nice-looking one with jQuery:

Making A Slick Content Slider
A sleek content slider with the help of jQuery and the MopSlider plugin:

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
There is no need for a database nor a PHP back-end for this gallery. This means that it is really easy to incorporate into an existing site – you just have to change a few lines of html code:

Create a Slick and Accessible Slideshow Using jQuery
A nice tutorial on Six Revisions on how to create a slick content slideshow using jQuery:

Making a Mosaic Slideshow With jQuery & CSS
A very detailed and advanced tutorial on how to create a mosaic slideshow by using CSS and jQuery:

Advanced jQuery background image slideshow
A very well explained tutorial on how to create a background image slideshow:

Automatic Image Slider w/ CSS & jQuery
Soh Tanaka created one of the best image slider tutorials — you must check this one out to learn how to create a beautiful automated image slider using CSS and jQuery:

How to Create a Simple iTunes-like Slider
Take a look at how to create a slider similar to the one used in the iTunes store:

Build a Content Slider with jQuery
A tutorial that is a bit different than the rest: explains how to create an easy-to-implement content slider plugin, allowing multiple instances on a page, allowing users to customize the size, button images, etc. and finally, how to create valid markup:

Create a Custom jQuery Image Gallery with jCarousel
A nice tutorial on creating a jQuery image gallery using jCarousel:

Simple JQuery Image Slide Show with Semi-Transparent Caption
Here you can learn how to create a simple image slide show with a semi-transparent caption with jQuery:

Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider:

Creating a Rotating Billboard System with jQuery and CSS
In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads:

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin
Here you will need to have some basic XHTML/CSS and JavaScript skills — you can then learn how to use jFlow, a minimalist jQuery plugin to create a content slider:

Content Slider Using CSS and Jquery
In this tutorial you can learn how to create a slider which can be used to slide your content of any website:

Creating a Slick Auto-Playing Featured Content Slider
A nice tutorial on how to create a slick auto-playing featured content slider:

Further Resources

All About jQuery: Plugins, Tutorials and Resources
50 Useful jQuery Plugins to Enhance your Forms
50 Useful JavaScript and jQuery Techniques and Plugins

(ik)

  

Here we present some useful plugins and tutorials that will let you create awesome forms for your websites — whether it’s a sign up form or contact us form. You can enhance its functionality and usefulness with these plugins. Since these forms are used by the visitors of your website to interact with you, they are of great importance and for this reason you cannot just ignore them as they play an important role in the success of your website. So here we have gathered a bunch of jQuery Plugins, Tutorials and Resources which will help you in improving the effectiveness and beauty of these forms

Useful jQuery Plugins

Turn Any Webform into a Powerful Wizard ( Demo | Download )
The FormToWizard plugin helps you to turn any webform into a powerful wizard with jQuery “steps left” information.

toChecklist plugin ( Demo | Download )
The toChecklist plugin for jQuery will give you the functionality of a SELECT box without the need to ctrl+click items to select them.

FlexBox ( Demo | Download )
FlexBox is a jQuery plugin that is intended to be a very flexible replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data.

A fancy contact form ( Demo | Download )
Providing a simple and reliable means of feedback from site visitors is a crucial part of any web presence. The most simple and common feedback channel are contact forms. In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.

Jquery Collapser ( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements.

asmSelect – Select Multiple Form Fields ( Demo | Download )
asmSelect is a jQuery plugin that answers some of these issues. A progressive enhancement is applied to the select multiple that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options.

JQUERY: DFORM ( Demo | Download )
The jQuery.dForm plugin allows you to create your HTML forms programmatically from

A jQuery Inline Form Validation ( Demo | Download )
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.

JQuery plugin for input text field filtering ( Demo | Download )
This is simple JQuery plugin for filtering text input field by using regexp. Only allowed characters will be inserted into input field, others will be silently dropped.

jQuery Show Password Plugin ( Demo | Download )
This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.

Simple Validation Plugin ( Demo | Download )
A simple validation plugin that comes in at about 1.5kb.

AutoSuggest jQuery Plugin ( Demo | Download )
AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy.

How to create Skype-like Form buttons using jQuery ( Demo | Download )
If you use Skype then you have probably noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. In this tutorial Janko Jovanovic is going to show you how to create the same button using jQuery and some simple CSS.

Create an AJAX/jQuery/PHP Contact Form ( Demo | Download )
This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page.

JavaScript image combo box ( Demo | Download )
Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element.

jQuery plugin: Password Valida ( Demo | Download )

prettyCheckboxes ( Demo | Download )
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

Boxy – Facebook-like dialog/overlay, with frills ( Demo | Download )
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

Enlarge input fields on focus ( Demo | Download )

WordPress contact form without a plugin, using jQuery ( Demo | Download )
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, Trevor is going to show how to use a custom page template to create a contact form in WordPress without a plugin.

Build An Incredible Login Form With jQuery ( Demo | Download )
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

In-Field Labels jQuery Plugin ( Demo | Download )
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

jQuery Keypad ( Demo | Download )

How to Enhance Forms Using jQuery UI ( Demo | Download )
jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started

Autocomplete ( Demo | Download )
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

jqTransform ( Demo | Download )
This plugin is a jQuery styling plugin wich allows you to skin form elements.

jQuery Validation ( Demo | Download )

Submit A Form Without Page Refresh using jQuery ( Demo | Download )
Submit a contact form that sends an email, without page refresh using jQuery, This tutorial will help you creating a form that can be submitted without page refreshing, using JQuery.

Selecting Multiple Select Form Elements on the Fly ( Demo | Download )
The following jQuery tutorial offers a simplified solution to selecting related select menu options within a form.

timepickr ( Demo | Download )
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.

AJAX forms ( Demo | Download )
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

jQuery AlphaNumeric ( Demo | Download )
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Give Your Characters a NobleCount ( Demo | Download )
NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

Password Strength Indicator and Generator ( Demo | Download )
In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

“SAFE SUBMIT” AJAX REQUEST BUTTON HANDLER ( Demo | Download )
If you want to disable your ajax submit buttons when clicked to disallow double submits, jquery.safesubmit makes it simple and safe.

JQByte StickyForms ( Demo | Download )
StickyForms is a jQuery plugin that automatically saves all form fields into cookies, and then autofills those values on any form that shares element IDs across your site.

A BETTER FORM – SPAM-LESS ROBOT-LESS FORMS ( Demo | Download )
A Better Form is a jQuery plugin I designed to help eliminate spam comments, spam emails and other automated form submissions.

Simple chained combobox ( Demo | Download )

Changing Form Input Styles on Focus with jQuery ( Demo | Download )
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

Ajax Upload; A file upload script with progress-bar, drag-and-drop ( Demo | Download )
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Select Multiple Form Fields ( Demo | Download )

Masked Input Plugin ( Demo | Download )

Elastic – Make your textareas grow ( Demo | Download )
This jQuery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

jQuery “Highlight” Plugin ( Demo | Download )

Ajax Fancy Captcha ( Demo | Download )

File Style jQuery ( Demo | Download )
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Emblematiq Niceforms ( Demo | Download )
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Uploadify – a multiple file upload plugin for jQuery ( Demo | Download )
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Progress Bar ( Demo | Download )
It’s a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

Uniform – Sexy forms with jQuery ( Demo | Download )
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

jQuery.uiSelect ( Demo | Download )

Autocomplete ( Demo | Download )
By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Useful jQuery Resources

• All About jQuery: Plugins, Tutorials and Resources
  A bunch of exciting and awesome jQuery plugins for your personal use.
• jQuery Techniques and Plugins
  40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites.
• Useful jQuery Plugins for Slideshows, Graphs and Text Effects
  35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.
• 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
  An overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
• Amazing and Fresh jQuery Plugins
  25 of the best newly (or, pretty close to new) released jQuery plugins.
• 40 Exceptional jQuery Interface Techniques and Tutorials
  Explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components.
• 40+ Excellent jQuery Tutorials
  Various jQuery Tutorials for your source of inspiration.
• 50 Useful JavaScript and jQuery Techniques and Plugins
  Useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.

(ik)
]]> http://www.noupe.com/jquery/50-useful-jquery-plugins-to-enhance-your-forms.html/feed 24