35 Stunning jQuery Tutorials For Web Developers

http://inspiretrends.com/jquery-tutorials-for-web-developers/

Make an Animated Alphabet using Keypress Events in jQuery

Lights Out – Dimming/Covering Background Content with jQuery

LATERAL ON-SCROLL SLIDING WITH JQUERY

NATURAL LANGUAGE FORM WITH CUSTOM INPUT ELEMENTS

SIMPLE YOUTUBE MENU EFFECT

Sliding Boxes and Captions with jQuery

How to Create Accordion Menu (CSS3+jQuery)

Creating Android Dock Using jQuery & CSS3

Creating “Next Level” Search Form Using jQuery & CSS3

Flyout Image Slider Using jQuery & CSS3

How to grab Dribbble feed with jQuery and CSS3

Auto Moving Submenu Using jQuery

Stylize Your Own Checkboxes

How to Create a Walking Navigation

Creating Consecutive Slide Using jQuery

DeviantArt API Instant Search App using Ajax & PHP

Making Draggable Webpage Elements using jQuery

Building an Image Slideshow UI Switcher with jQuery

How to Build an iOS-Style Content Slider using jQuery

Making Better Select Elements with jQuery and CSS3

Building A Step-By-Step Guide Using Intro.Js [Tutorial]

Make a Jquery and CSS3 powered Lightbox Gallery

Web Design: Drag And Drop With JQuery UI Sortable

Creating A Volume Controller With JQuery UI Slider

Magnifying glass for image zoom using Jquery and CSS3

Mobile App Design/Dev: Building Navigation With JQuery

Quick Feedback Form w/ PHP and jQuery

Cycle Through Images on Hover with jQuery

Generating Files with JavaScript

Mini Help System with jQuery

Making an Interactive Picture with jQuery

Mini AJAX File Upload Form

Create a Beautiful Password Strength Meter

Let’s Make A Simple AJAX Note Taking App

Free jQuery Slideshows and Carousels

Slideshows

Coin Slider

Features:

• Unique transition effects
• Flexible configuration
• Linking images
• Compatible with Android and iPhone
• Auto slide
• Lightweight (8Kb)
• Fully customizable using CSS

Download

Anything Slider

Features:

• Slides are HTML content (can be anything)
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-play (optional feature, can start playing or stopped)
• Infinite/continuous sliding
• Pauses auto-play on hover (option)

Download

WOW Slider

Features:

• Awesome and unique transitions
• Fully responsive
• Graceful degradation to CSS-only slider
• All browsers, all devices
• Search engine friendly
• Lightweight – 4-12Kb

Download

Camera

Camera slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/ and a customized version of jQuery Mobile http://jquerymobile.com/ to use Camera with mobile devices. These plugins are included in the zip download, but do check the links for newer versions.

Download

SlidesJS

Features:

• Responsive: create dynamic slideshows that adapt to any screen
• CSS3 transitions: animations that run smoothly on modern devices
• Touch: swipe support that tracks touch movements on supported devices
• Easy setup: get going fast with the easy-to-use examples

Download

iView Slider

Features:

• Responsive down to mobile (applies for slider area and images)
• Touch gestures navigation for iOS, Android and other touch devices
• Highly flexible and customizable
• 35 transition effects available
• Animated HTML captions with custom effects (fade, move top, move right…)
• Extremely simple configuration
• Easily customizable via CSS file

Download

FlexSlider

Features:

• Simple, semantic markup
• Supported in all major browsers
• Horizontal/vertical slide and fade animations
• Multiple slider support, Callback API, and more
• Harware accelerated touch swipe support
• Custom navigation options
• Compatible with the latest version of jQuery

Download

Slidorion

A combination of an image slider and an accorion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

Download

jQuery Slidershock

Slidershock is the most complete and responsive jQuery/WordPress slider on the web. It is currently available for WordPress as a plugin and a jQuery code for non-WordPress environments. Slidershock can be used to slide images and text, and allows the addition of captions to slides. The free version has 10 of the 31 available effects in the premium version.

Download

Simple jQuery Fullscreen Image Gallery

This is actually a tutorial, but the work files are available and the end result is a beautiful gallery that was too nice to leave out of this round up.

Download

Supersized

Features:

• Resizes images to fill the browser while maintaining image dimension ratio
• Navigation controls with keyboard support
• Integration with Flickr – pull photos by user, set or group
• Cycles background via slideshow with transitions and dynamic preloading
• Core version available for those that just want background resizing

Download

Sideways

Sideways image gallery is made by implementing some scripts and tutorials and some CSS3. It utilizes the jQuery UI, jQuery Easing and jQuery mousewheel plugin.

Download

AD Gallery

Features:

• Choose effect: slide in, fade in, etc
• Keyboard navigation arrows
• Images are preloaded, and if they aren’t finished loading, a loading image will appear
• Callbacks on different events that have access to the internal object, so you can access all internal methods
• Permalink to a specific image, either by index or id

Download

Flux Slider

Flux slider is a CSS3 animation based image transition framework.

Download

Responsly.js

Features:

• Works from large monitors to laptops, to tablets to mobiles
• Pure CSS styling
• CSS3 based transitions (hardware accelerated where possible)
• Animations work on all modern browsers including mobile
• Simple lightweight design, adds little to your download size
• Can be heavily customized by editing CSS

Download

Carousels

jCoverflip

Features:

• Easy to use: Drag or click to showcase featured content
• Flexible Integration: The widget can be run as a Drupal moule or as a standalone widget for your website
• Easy Installation: Simply download, configure and push content to the jCoverflip widget
• Ready to Use: Out-of-the-box, the widget utilizes a clean default style
• Customizable: Control the number of items, colors, fonts and styles through CSS
• Open Source: Distributed using the GNU General Public License and built using jQuery and jQuery UI

Download

Cloud Carousel

Features:

• Works with most browsers – tested on IE6-IE9, Firefox, Chrome, Opera, Safari
• Accurate 3D perspective
• Optional auto reflections – no need to modify your images or add server code
• Easy integration with basic valid HTML and a tiny bit of JavaScript
• Small 5Kb (minified) script
• Degrades gracefully with JavaScript turned off
• Fully accessible with no CSS or text only browsers
• Works with other plugins such as Slimbox, and preserves your links and mouse events
• Optional mouse wheel support

Download

carouFredSel

Features:

• Fully customizable and skinnable, filled with loads of custom events and options
• Scrolls automatically or by using buttons, keys, the mousewheel or by dragging and swiping
• Optionally responsible/fluid/liquid out of the box
• Supports variable item-sizes (also with a variable number of visible items)
• Built in keyboard- and mouse-navigation and pagination
• 9 built in effects such as scroll, fade, crossfade, cover and uncover
• Capable of using CSS3 transitions
• Align (left/center/right) items inside the available width/height
• Dynamically add and remove items to/from the carousel
• GET and (re)SET the configuration options after creation

Download

jQuery Liquid Carousel Plugin

Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.

Download

Agile Carousel

Agile Carousel is highly customizable so youu can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS.

Download

jQuery Infinite Carousel Plugin

Features:

• Just 11Kb compressed
• Displays images and videos
• Captions and links
• Thumbnail options
• Circular ring timer
• Keyboard navigation
• Callback functions
• Works in all major browsers

Download

Circular Content Carousel

A simple circular content carousel. Click on the ‘more’ link to move the items to the left and a content area will slide out. Navigate through the carousel where each step will reveal the next or previous content box with its expanded content.

Download

Elastislide

Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

Download

Tiny Carousel

Features:

• Can slide vertically or horizonally
• Supports navigation by button or paging
• Animation time can be set in milliseconds or to ‘instant’
• Easily customizable
• Supports all current browsers (Firefox, Internet Explorer 6+, Safari, Opera, Chrome)
• Lightweight – only 100 lines of code, 2.29Kb

Download

jQuery Feature Carousel

Features:

• Arrange divs of content in a 3D rotating carousel
• Currently supports one flanking ‘feature’ on either side of center feature
• Show clickable indicators (blips) of what feature is currently at the center
• Display text overlay on bottom of feature
• Speed, effects, locations and more are all changeable
• Works in Chrome, Firefox, Safari and IE6+
• Automatically preloads images before firing up the carousel

Download

jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. The plugin provides a method called ‘cycle’ which is invoked on a container element. Each child element of the container becomes a ‘slide’. Options control how and when the slides are transitioned.

Download

[jQuery] 모든 라디오버튼, 체크박스 클릭시 로그인하라는 경고 보여주시

        $("[type='radio']").click(function(e){
            if (uid == ""){
       alert('로그인 후 이용해 주세요');
                $(this).attr("checked",false);
            }
        });
        $("[type='checkbox']").click(function(e){
            if (uid == ""){
       alert('로그인 후 이용해 주세요');
                $(this).attr("checked",false);
            }
        });

jQuery.textcomplete: Autocomplete for textarea

자동완성

jQuery.textcomplete is a jQuery plugin that adds an autocomplete feature to textareas, like the ones found in GitHub comment forms. It’s completely open source, released under the MIT license.

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.textcomplete.js"></script>

$('textarea').textcomplete(strategies);

var strategies = {
  // There are two strategies called 'foo' and 'bar.'
  // The plugin does not care these property names so you should use
  // meaningful names.
  foo: strategy,
  bar: otherStrategy
};

var strategy = {
  // Required
  match:    matchRegExp,
  search:   searchFunc,
  replace:  replaceFunc,

  // Optional
  index:    indexNumber,
  maxCount: maxCountNumber,
  template: templateFunc,
  cache:    cacheBoolean
}

// Detect the word starting with '@' as a query term.
var matchRegExp = /(^|\s)@(\w*)$/;
var indexNumber = 2;

var searchFunc = function (term, callback) {
  // Show local cache immediately.
  callback(cache[term], true);

  $.getJSON('/search', { q: term })
    .done(function (resp) {
      // Resp must be an Array of String such as:
      //   ['hello', 'world']
      callback(resp);
    })
    .fail(function () {
      // Callback must be invoked even if something went wrong.
      callback([]);
    });
};

var templateFunc = function (value) {
  return '<b>' + value + '</b>';
};

var replaceFunc = function (value) { return '$1@' + value + ' '; };

textarea.value = textarea.value.replace(matchRegExp, replaceFunc(value));

var emojies = ['+1', '-1', 'dog', 'cat'];

$('textarea').textcomplete({
  // mention strategy
  mention: {
    match: /(^|\s)@(\w*)$/,
    search: function (term, callback) {
      callback(cache[term], true);
      $.getJSON('/search', { q: term })
        .done(function (resp) { callback(resp); })
        .fail(function ()     { callback([]);   });
    },
    replace: function (value) {
      return '$1@' + value + ' ';
    },
    cache: true
  },

  // emoji strategy
  emoji: {
    match: /(^|\s):(\w*)$/,
    search: function (term, callback) {
      var regexp = new RegExp('^' + term);
      callback($.map(emojies, function (emoji) {
        return regexp.test(emoji) ? emoji : nil;
      }));
    },
    replace: function (value) {
      return '$1:' + value + ': ';
    }
  }
});

40 Fresh jQuery Plugins To Make Your Website User Friendly

Flexisel – Responsive Carousel Plugin

( Demo | Download )

Resize your browser window to see how you the plugin can adjust to the window width. Flexisel will adapt responsively as the screen width gets smaller…

Swipebox – A Touchable jQuery Lightbox

( Demo | Download )

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

Sidr – Creating Facebook-Like Side Menus

( Demo | Download )

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive.

Unslider – A ‘Super-Tiny’ jQuery Slider

( Demo | Download )

The jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb.

jQuery Nested – Create Multi-Column, Dynamic Grid Layouts

( Demo | Download )

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts.

jResponsive – Super-Smooth Transition Layouts

( Demo | Download )

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly. One of the very famous website that using this type of layout is Pulse.

MultiDialog

( Demo | Download )

MultiDialog utilizes jQuery UI Dialog Widget for a full featured Modalbox / Lightbox application.

FlexNav – Flexible, Device Agnostic Navigation

( Demo | Download )

A jQuery Plugin for Responsive Menus.

Flaunt.js – Responsive Navs with Nested Click-To-Reveal

( Demo | Download )

Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box. Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you’ve pressed…

SlideToucher – Touch Enabled jQuery Plugin for Content Swiping

( Demo | Download )

SlideToucher, touch enabled jQuery plugin for content swiping. Supports vertical and horizontal swipes.

LiquidSlider – A Responsive jQuery Content Slider

( Demo | Download )

A Responsive jQuery Content Slider.

Dropdown.dot.js – Flexible Dropdowns Based on dot.js Templates

( Demo | Download )

A JQuery Plugin for super-flexible Dropdowns based on dot.js Templates.

Typeahead.js – A Fully-Featured Autocomplete Library

( Demo | Download )

A fast and fully-featured autocomplete library.

iCheck – Customize Checkboxes & Radio Buttons

( Demo | Download )

iCheck plugin works with checkboxes and radio buttons like a constructor.

Chardin.js – Simple Overlay Instructions for Apps

( Demo | Download )

Simple overlay instructions for your apps.

jQuery Alpha Image Plugin

( Demo | Download )

This plugin can change selected colours to transparent on your image and give result as image or imagedata. This plugin works on IE9+, Chrome, Firefox, Safari. I didn’t try in opera.

ScrollUp

( Demo | Download )

A Lightweight Plugin for Creating a Customisable “Scroll-to-Top”.

Adding Alarms to the Digital Clock

( Demo | Download )

Adding Alarms to the Digital Clock.

Ractive.js

( Demo | Download )

Ractive.js is different. It solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve.

Firechat

( Demo | Download )

Firechat is an open-source, real-time chat widget built on Firebase. It offers fully secure multi-user, multi-room chat with flexible authentication, moderator features, user presence and search, private messaging, chat invitations, and more.

Albumize

( Demo | Download )

Albumize is a jQuery plugin that lets you manage collection of images in the web page as albums. With albumize, you can browse albums, add cover image to albums and switch between albums.

PowerTip – A jQuery Hover Tooltip Plugin

( Demo | Download )

PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

jQuery Pin – Pin Any Element Within a Container

( Demo | Download )

Query.Pin is here to help! Pin any element to the top of a container. Easily disable it for smaller screen-sizes where there’s no room for that kind of shenanigans.

Perfect-Scrollbar – A jQuery Scrollbar Plugin

( Demo | Download )

Tiny but perfect jQuery scrollbar plugin.

Complexify

( Demo | Download )

Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

Pickadate.js

( Demo | Download )

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Cool Kitten

( Demo | Download )

It is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.

Google Map

( Demo | Download )

A jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes.

qTip2 – Pretty powerful tooltips

( Demo | Download )

The second generation of the advanced qTip plugin for the ever popular jQuery framework.

Magnific Popup

( Demo | Download )

Fast, light, mobile-friendly and responsive lightbox and modal dialog plugin. Open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), photo gallery. In/out animation effects are added with CSS3 transitions.

AutoHideInput

( Demo | Download )

AutoHideInput is a simple jQuery plugin that hides and shows the information entered by the user.

Progression.js

( Demo | Download )

A jQuery plugin that gives users real time hints & progress updates as they complete forms.

Thumbnail Grid with Expanding Preview

( Demo | Download )

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

App Showcase with Grid Overlay

( Demo | Download )

A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.

jQuery TourBus

( Demo | Download )

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Pop Easy

( Demo | Download )

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Smint : Sticky Menu with Smooth Scroll

( Demo | Download )

SMINT is a simple plugin for lovers of one page websites.

FlipClock

( Demo | Download )

Least.js

( Demo | Download )

Random & Responsive jQuery, Html5 & Css3 Gallery with Lazyload.

Making Chart

( Demo | Download )

Make Pretty Charts For Your App with jQuery and xCharts.

Read more: http://www.smashingapps.com/2013/09/10/40-fresh-jquery-plugins-to-make-your-website-user-friendly.html#ixzz2edYdgf3K