Best jQuery HTML5 Plugins & Tutorials with Demo

    Tooltipster : jQuery Tooltip Plugin

    Tooltipster : jQuery Tooltip Plugin

    Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.

    • Supports HTML tags inside the tooltip
    • Lightweight and degradable
    • Extremely flexible & fast to set up
    • Easily styled with 100% CSS – no images needed
    • Plays nicely with IE

    Ideal Forms : Responsive Forms with Html5 & jQuery

    Ideal Forms : Responsive Forms with Html5 & jQuery

    The ultimate framework for building and validating responsive HTML5 forms.

    Features:

    • Fully responsive (AKA adaptive, adapts to the container, no css media queries needed).
    • Keyboard support.
    • Every input type can be customized including select, radio, checkbox and file.
    • Custom datepicker using jQuery UI (with fallback)
    • “On the spot” validation.
    • Localization
    • HTML5 placeholder for every browser.

    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.