Best jQuery Plugin & Tutorial of September, 2013

SlickNav : jQuery Responsive Mobile Menu Plugin

SlickNav : jQuery Responsive Mobile Menu Plugin

Responsive Mobile Menu jQuery Plugin.

Features:

  • Supports with multi-level menus
  • Flexible, simple markup
  • Cross-browser compatibility
  • Keyboard Accessible
  • Degrades gracefully if javascript disabled
  • Creates ARIA compliant menu

jQuery Cascading DropDowns

jQuery Cascading DropDowns

Cascading DropDowns is a jQuery plugin that implements dropdown lists in which contents of one list depends on the selection of another list. The plugin has right panel with items (any html structure), that depend on dropdown selected value and filtered on selection callback. The dropdowns work with json as data source (ajax or javascript array). The right panel items work with ajax or inline html as data source.

Features:

  • Works with JSON and AJAX (PHP + SQLite example)
  • Supports HTML/DOM data source for the right panel items
  • Supports javascript array as data source for dropdowns
  • Fully customizable styles
  • Works in all major browsers
  • Annotated source code
  • JSDoc documentation

YoutubeTV : jQuery YouTube User/Playlist player

YoutubeTV : jQuery YouTube User/Playlist player

A small, slick, library independent YouTube User/Playlist player.

Features:

  • Library Independent
  • Customizable via CSS
  • Autoplay
  • Remove YouTube Chrome
  • Supports Playlists and Users
  • jQuery Support
  • Module Support

Demos :

Livestamp.js : jQuery plugin for Timeago text to Timestamped HTML

Livestamp.js : jQuery plugin for Timeago text to Timestamped HTML

A simple, unobtrusive jQuery plugin that provides auto-updating timeago text to your timestamped HTML elements using Moment.js.

jQuery CSS3 Modern Menu 3

jQuery CSS3 Modern Menu 3

Modern Menu 3 is a clean, modern and easy to use menu. It has a number of features that make it both useful and compelling:

  • It has a clean and attractive design.
  • It offers both a horizontal and a vertical layout.
  • It comes with 8 different themes to choose from.
  • The look is completely customizable.
  • It supports multilevel dropdowns.
  • It has smooth and attractive animations for the buttons as well as the dropdowns.
  • It uses CSS animations for better performance.
  • It has a jQuery animation fallback for browsers that do not support CSS animations.

Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

Context.js is a lightweight solution for contextual menus. Currently, there are two versions.

The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it’s base styles.

Features:

  • Linted: Valid JS
  • Can be used with or without Twitters Bootstrap.css
  • Event Based Links
  • Anchor Links
  • Headers
  • Dividers
  • Recursive Menus (infinite depth)
  • Vertical Space Detection (turns into a “dropup”)
  • Horizontal Space Detection (Drops to the left instead of right)
  • Add/Delete menus Dynamically

jQuery.touchdragh : Makes elements Draggable horizontally by Touch

jQuery.touchdragh : Makes elements Draggable horizontally by Touch

This makes elements draggable horizontally by touch.

  • touchdragh: demo
  • touchdragh with transition: demo
  • touchdragh forever option: demo
  • touchdraghfitty: demo
  • touchdraghfitty with transition: demo
  • touchdraghsteppy: demo
  • touchdraghsteppy with transition: demo
  • touchdraghsteppy refresh method: demo
  • touchdraghsteppy forever option: demo
  • touchdraghsteppy normalize_height option: demo
  • touchdraghsteppy unsteppify: demo
  • touchdraghsteppy unsteppify manually slide: demo
  • dragger option: demo

with Media Queries using $.ViewportWatcher

  • touchdraghsteppy media queries example: demo
  • touchdraghsteppy media queries example2: demo

HTML5 JavaScript Gem Game With Saved Scoreboard

HTML5 JavaScript Gem Game With Saved Scoreboard

Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually “not much”, everything that I will be using in todays tutorial I’ve already covered in various different guises in my previous tutorials. We’ll be using only pure JavaScript and CSS in this tutorial and the images.

Ion.CheckRadio : jQuery plugin for styling checkboxes and radio-buttons

Ion.CheckRadio : jQuery plugin for styling checkboxes and radio-buttons

jQuery plugin for styling checkboxes and radio-buttons.

  • Ion.CheckRadio — nice and easy jQuery-plugin for checkbox and radio-buttons customization.
  • With skin support
  • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Ion.CheckRadio supports touch-devices (iPhone, iPad, etc.).
  • Ion.CheckRadio freely distributed under terms of MIT licence.

jQuery Multi Purpose Media Boxes – Responsive Grid

jQuery Multi Purpose Media Boxes - Responsive Grid

This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
The navigation filter bar is generated automatically from the categories you specify to each image.

Features:

  • Fully responsive grid and lightbox
  • Lazy Load Feature
  • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
  • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
  • Set the number of images to load at start and when you click the “load more images” button
  • Support thumbnails for the grid only to the images you want to improve performance
  • Fully Responsive Grid and Lightbox
  • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
  • You can specify a static width for each column or specify number of columns
  • When specifying the number of columns you can set the minimum width for each column
  • CSS3 Effects
  • Direction aware hover effect
  • Lightbox with slideshow (play, pause, auto-play)
  • Easy implementation
  • Compatible with Twitter Bootstrap


Best jQuery websites design awards