jQuery Dynatable : HTML5+JSON interactive Table plugin

jQuery Dynatable : HTML5+JSON interactive Table plugin

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON.

Dynatable does three things:

  1. Normalize: It normalizes an HTML table into an array of JSON objects, where each JSON object (or record) corresponds to a row in the table.
  2. Operations: It sorts, filters, and paginates the JSON collection.
  3. Rendering: It renders the resulting collection from the operations back to the table.

Animated Border Menus with CSS3 & JavaScript

Animated Border Menus with CSS3 & JavaScript

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

Signature Pad : jQuery plugin Records the Drawn Signature for later regeneration

Signature Pad : jQuery plugin Records the Drawn Signature for later regeneration

A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

Demos :

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