Best jQuery HTML5 Plugins & Tutorials with Demo

    Audio-Gallery-Suite (A complete audio gallery solution made with HTML5/CSS3/jQuery-JS/C#)

    Audio-Gallery-Suite audio gallery solution made with HTML5/CSS3/jQuery-JS/C#

    Audio-Gallery-Suite is a complete audio gallery suite/solution that includes a web audio gallery and a software for managing playlists, uploading audios and managing the web audio gallery. The Audio-Gallery-Suite is built up using the latest technology and harnesses their power to put up a sophisticated solution. The Audio-Gallery-Suite is made in a way to be easily setup and deployed by anyone who wishes to use it. I hope that this project proves useful for anyone who intends to use it.
    Audio-Gallery-Suite is a complete audio gallery solution made with HTML5/CSS3/Jquery-JS/PHP-ajax/C# that includes a web audio gallery and a software for managing the web audio gallery.

    nobtrusive Slider Control/HTML5 Input Range Polyfill

    nobtrusive Slider Control/HTML5 Input Range Polyfill

    An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution.

    • The script can be used as an HTML5 input range polyfill solution
    • Introduces a gradient filled “range bar” for quick visual feedback
    • iOS Touch screen friendly
    • Arrives with a new CSS3 skin that degrades gracefully in older browsers
    • A small network footprint – only two HTTP requests and a total size (minified and gzipped) of about 11k
    • Unobtrusive & namespace friendly
    • Conforms to the WAI-ARIA defined role of “slider”
    • Keyboard accessible
    • Mousewheel compatible
    • Responsive design friendly

    HTML5 Sortable : jQuery plugin to create sortable lists and grids

    HTML5 Sortable : jQuery plugin to create sortable lists and grids

    HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

    Features :

    • Less than 1KB (minified and gzipped).
    • Built using native HTML5 drag and drop API.
    • Supports both list and grid style layouts.
    • Similar API and behaviour to jquery-ui sortable plugin.
    • Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+.

    Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

    Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

    Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.

    MetroPanel – Navigator for Modern Sites with jQuery,Html5 & Ajax

    MetroPanel - Navigator for Modern Sites with jQuery,Html5 & Ajax

    MetroPanel is new navigator system for modern sites with following features

    Features:

    • Two Panel Position: left and right
    • Unlimited Items
    • Unlimited background
    • AJAX + HTML5 smart load for SEO
    • jQuery + CSS3 Animation Effects
    • Auto Show or Auto Hide Panel
    • Easy Deploy for Almost Sites
    • Many Options for Custom

    Buzz! : A jQuery Html5 Audio Library

    Buzz! : A jQuery Html5 Audio Library

    Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade gracefully on non-modern browsers.

    Aloha Editor : HTML5 WYSIWYG Editor with jQuery

    Aloha Editor : HTML5 WYSIWYG Editor with jQuery

    The world’s most advanced browser HTML5 based WYSIWYG editor lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.

    Create a Sticky Navigation Header Using jQuery Waypoints

    Create a Sticky Navigation Header Using jQuery Waypoints

    In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off. we’re going to use one of HTML5′s new elements, the navtag, as a container for a horizontal list of links. I’ll briefly explain how to make it look pretty using a little bit of CSS.

    Most importantly, you’ll make yourself familiar with the basics of jQuery’s Waypoints plugin, which will provide advanced functionality: as the user scrolls down, the navigation bar will stick to the top of the viewport, as well as change to indicate the current section. As a little added touch, we’ll use another plugin, ScrollTo, in order to provide smooth scrolling and convenient positioning when the user clicks on the navigation links.

    imJQMosaic : jQuery plugin creates Mosaic pattern using an image

    imJQMosaic : jQuery plugin creates mosaic pattern using an image

    imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image.

    This is a pure JavaScript based jQuery plugin. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don’t work on mobile phones not supporting Flash content.

    This plugin is based on the technique of CSS sprites and also uses some of the new features introduced in CSS3. The plugin requires latest browsers that support HTML5 and CSS3. In absence of adequate browser, the plugin gracefully degrades and still works! Ideal behavior of this plugin can be viewed in Safari 4 or Firefox 3.5. But it works with Chrome and IE 8 also.

    Building Persistent Sticky Notes with Local Storage in jQuery

    Building Persistent Sticky Notes with Local Storage in jQuery

    HTML5 local storage is like cookies on steroids; it’s incredibly simple to use and yet still so powerful. In this tutorial, I’ll show you how to create “sticky notes” functionality, that allows your users to take persistent notes while browsing your site with jQuery.