Best jQuery HTML5 Plugins & Tutorials with Demo

    jQuery.fluxoModal : jQuery plugin similar to Lightbox

    jQuery.fluxoModal : jQuery plugin similar to Lightbox

    jQuery.fluxoModal is a jQuery plug-in similar to lightbox. It can highlight any kind of html element inside an html modal window, blurring the background using html5 canvas, CSS3 animations and a crossbrowser fallback for IE.

    jQuery.validVal : A highly customizable and feature rich jQuery form validator

    jQuery.validVal : A highly customizable and feature rich jQuery form validator

    jQuery.validVal is a plugin designed to simplify form validation.It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with very little effort.

    Features:

    • Can be used for validating any kind of HTML-form, with very little effort.
    • Supports five default value-validations: “required”, “number”, “email”, “url” and “pattern”.
    • Supplies a workaround for the lack of support for HTML5 attributes and type-values.
    • Great default “invalid-handler” that can be extended or customized.
    • Enables a group of checkboxes to have at least one checkbox to be “required”.
    • Built in support for clearing the placeholder-value “onFocus”.
    • Automatically select the next input-field when the “maxlength” nth-character is entered.

    Fine Uploader : jQuery Multiple File Uploader

    Fine Uploader : jQuery Multiple File Uploader

    Multiple file upload plugin with progress-bar, drag-and-drop.This project attempts to achieve a user-friendly file-uploading experience over the web. It’s built as a Javascript plugin for developers looking to incorporate file-uploading into their website.

    This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere.

    Features:

    • Multiple file select, progress-bar in FF, Chrome, Safari
    • Drag-and-drop file select in FF, Chrome
    • Uploads are cancelable
    • No external dependencies
    • Doesn’t use Flash
    • Fully working with HTTPS
    • Automatic uploads (as files are selected) or queue files to me manually triggered when ready

    jQuery Cute Slider – 3D & 2D HTML5 Image Slider

    jQuery Cute Slider - 3D & 2D HTML5 Image Slider

    Tired of boring flat sliders? Looking for a unique slider? Here’s what you want,with Cute Slider you will be able to show your slides with awesome 3D & 2D transitions.Cute Slider makes your ideas alive, It gives you desire,you can use it as an advanced 2D slider with tons of 2D transitions, or add third dimention to your slider and create a unique and inpressive 3D slider.

    Features :

    • 3D & 2D effects
    • 100+ prest transitions
    • 3 fallback levels(CSS3D, Canvas, 2D)
    • Cross Browser
    • Device friendly
    • Youtuve and Vimeo videos
    • Search engine optimized

    MelonHTML5 : 3D Cube Gallery in Html5, jQuery & CSS3

    MelonHTML5 : 3D Cube Gallery in Html5, jQuery & CSS3

    This is a flexible and easy to integrate Photo Gallery written in HTML5 , CSS3 and jQuery.

    Features:

    • 3D Cube Animation (Chrome, Safari, Firefox, IE10 )
    • Automatic thumbnail generation
    • Unique animated thumbnail preview
    • Grid or Custom Layout
    • Lightbox
      • Navigation
      • Keyboard Control
      • 3 Animations
      • Slideshow

    Classic Digg-Style Radio Buttons with CSS and jQuery

    Classic Digg-Style Radio Buttons with CSS and jQuery

    For this tutorial I want to explain how we can build custom radio button links similar to the old Digg category selection. You can click on any set of links which will also trigger an active state on the correlated radio input. This is one of the best ways to style a web form using a bit of simple JavaScript to enhance the user experience.

    Create.js : Make anything editable with jQuery

    Create.js : Make anything editable with jQuery

    Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

    Features:

    • Making RDFa-annotated content on pages editable
    • Managing collections of content (add, remove)
    • Local, in-browser storage and retrieval of unsaved content
    • Adaptable connector for communicating with the back-end system
    • Running workflows (approval, etc.) for content items
    • Browsing and reverting content history
    • Easy rebranding of the interface with some CSS

    uSquare – Universal responsive grid html5/jquery

    uSquare - Universal responsive grid html5/jquery

    uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.

    While we developed uSquare responsive grid plugin we carefully thought about its responsive layout. We wanted to make sure that all elements are visible and accessible with all resolutions for responsive layout.

    jQuery.html5form : Form Validation & Ajax Submission Plugin

    jQuery.html5form : Form Validation & Ajax Submission Plugin

    HTML5 validates forms without additional JavaScript.Currently only latest versiones of Firefox, Safari & Google Chrome supports this functionality.This plugin gets the same result in all versions on Internet Explorer and Firefox 3.6.

    Just create your form according the HTML5 syntax and the script will execute itself.It does not require extra classes. The plugin gets all the information from the HTML source.Runs automatically when detects Internet Explorer, Opera or Mozilla Firefox.The form sends through an asynchronous Ajax request by default.The plugin automatically gets method and action attributes declared on the form.

    Google+ style grid image gallery using jQuery

    Google+ style grid image gallery using jQuery

    The main focus of this article will be on the image grid. Let’s start with a look on the features of the original G+ image grid to find out what it takes to recreate it. To illustrate the features I am using Thomas Hawk’s G+ gallery which has some amazing images (check it out).