Best jQuery HTML5 Plugins & Tutorials with Demo

    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.

    Old School Cassette Player with HTML5 Audio & jQuery

    Old School Cassette Player with HTML5 Audio & jQuery

    Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette.

    Content Timeline – jQuery/HTML5/CSS3 plugin

    Content Timeline - jQuery/HTML5/CSS3 plugin

    Content timeline is powerful and lightweight jQuery/HTML5/CSS3 plugin, best for displaying date organized content. It is fully customizable, and easily implementable with any js script, video, flesh etc. Well structured code, and wide ranged API functions make it simple to get started and flexible for customization.

    Features:

    • 11 settings for customizing
    • Keyboard binded
    • 5 class events
    • Included easing effects
    • 7 embedded script control methods
    • Intuitive design
    • Fully flexible
    • Fully interactive timeline

    Creating a Slider Control with the HTML5 Range Input and JavaScript

    Creating a Slider Control with the HTML5 Range Input and JavaScript

    In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript function updating elements in the page as the user alters the range. At the moment, Internet Explorer and Firefox do not support the range input, but the WebKit (Safari and Chrome) and Opera browsers do.

    jPageFlipper : jQuery HTML5 Canvas page flipper

    jPageFlipper : jQuery HTML5 Canvas page flipper

    This is a wonderful implementation of page flipper entirely based on HTML 5 <canvas> tag. It means that it can work in any browser that supports HTML 5 standard draft – just out of the box!

    An HTML5 Slideshow w/ Canvas & jQuery

    An HTML5 Slideshow w/ Canvas & jQuery

    You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

    All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

    With JavaScript, we are going to apply a special filter to every image in the slideshow. We will create a new version of the images, with higher contrast and more vivid colors, and store it in a canvas elements.

    Coding a Guided Registration Form with jQuery

    Coding a Guided Registration Form with jQuery

    Techniques for building a usable registration form can be a major factor towards bringing in new users. When you’ve got an overly complicated form it can scare away so many first time visitors. But a great technique for keeping these people around is coding form hints into the layout.

    In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens.

    jqBootstrapValidation : jQuery validation plugin for bootstrap forms

    jqBootstrapValidation : jQuery validation plugin for bootstrap forms

    A JQuery validation framework for bootstrap forms.jqBootstrapValidation will scan for HTML5 validator attributes directly on the elements, plus any extra options specified via data attributes. By default, it will also sniff for native HTML5 form validation attributes, as detailed above.

    If you decide this isn’t what you want, you can restrict jqBootstrapValidation to only data attributes by setting sniffHtml to false when calling it on your form elements.

    wScratchPad : HTML5 jQuery Scratch Pad Plugin

    wScratchPad : HTML5 jQuery Scratch Pad Plugin

    The Websanova Scratch Pad is a unique one of a kind plugin that allows you to add a scratching effect to images something similar to scratching a lottery ticket. It is written using canvas so you would need an HTML5 compliant browser to use it but it does support a fallback to display a message to upgrade to a newer browser if the browser does not have canvas support. What’s really cool is that it keeps track of the percentage of area scratched so that you can trigger a callback once a user scratches a certain amount of the surface area.