Best jQuery HTML5 Plugins & Tutorials with Demo

PathJS : Simple, lightweight routing for web browsers

May 28, 2013 | Core Java Script, HTML5

PathJS is a lightweight, client-side routing library that allows you to create “single page” applications using Hashbangs and/or HTML5 pushState.

Features:

Lightweight
Supports the HTML5 History API, the ‘onhashchange’ method, and graceful degredation
Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
Well Tested (tests available in the ./tests directory)
Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
Independant of all third party libraries, but plays nice with all of them

Read More Demo

Responsive HTML5/jQuery Sign In/Registration Form

May 10, 2013 | CSS2 / CSS3.0, Forms, HTML5, Plugins, Premium, Responsive

Responsive HTML5 Sign In / Registration form, with jQuery effects and CSS3 customization.

Features:

it is compatible with all major browsers (IE8, IE9, IE10, Chrome, Mozilla Firefox, Opera, Safari)
really easy to use and to integrate into your website
cool effects
html5 custom validation
responsive layout
really easy to modify (100% CSS customizable)

Read More Demo

Bootstrap Maxlength : jQuery Html5 maximum length field Plugin

April 27, 2013 | Bootstrap, Forms, HTML5, Plugins

This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute “maxlength” to work.

The indicator badge show up on focusing on the element, and disappear when the focus is lost.

Read More Demo

gury : jQuery inspired canvas utility library

April 25, 2013 | HTML5, Plugins

Gury (pronounced “jury”) is a simple to use utility library for drawing, animating, and managing HTML5 canvas tags. The goal is to support the HTML5 Canvas API with a framework that allows for faster/easier application development.

It was built with simplicity in mind and its usage was modeled in the image of jQuery. For instance you can initialize, style, and animate an entire scene in a single expression using chaining.

Read More Demo

History.js : HTML5 History/State APIs with jQuery

April 22, 2013 | HTML5

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

Read More Demo

MelonHTML5 – Metro UI in HTML5, CSS3 & jQuery

April 17, 2013 | CSS2 / CSS3.0, HTML5, Premium, Responsive, Web

Metro UI is a flexible and easy to integrate framework to build your one page website in Windows 8 Metro UI. It is fully powered by HTML5, CSS3 and JavaScript with plengy of options for you to configure it to suit your own needs.

Features:

Desktop and Mobile Device (Phone + Tablet) Ready
Resonsive UI Design
Old IE Support
Sliding Button Bar
One Page Application
Working with Browser Back button
Customizable Tiles
Smart Page Content Caching
Integration with Google Analytics
Object oriented JavaScript framework

Read More Demo

Play Notification Sound using jQuery

April 17, 2013 | HTML5, Web

I received lots tutorial requests from my readers that asked to me, how to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag, it is just five lines of code. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this live demo.

Read More Demo