Best jQuery HTML5 Plugins & Tutorials with Demo

    EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

    June 29, 2012 | Animation, Core Java Script, Drag & Drop, HTML5
    EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

    EaselJS is a library to make working with the Canvas element easier. It provides a display list to allow you to work with display elements on a canvas as nested objects. It also provides a simple framework for providing shape based mouse interactions on elements in the display list. This is useful for games, generative art, and other highly graphical experiences.

    EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

    Read More Demo

    Mobile App Design/Dev: Building Navigation with jQuery

    June 29, 2012 | Ajax, CSS2 / CSS3.0, HTML5, jQuery Mobile, Menus
    Mobile App Design/Dev: Building Navigation with jQuery

    Smartphones are now equipped with some very efficient web browsers. JavaScript is more powerful than ever before, and can be extended with the help of code libraries such as jQuery. When you add in the latest HTML5/CSS3 specs, it’s possible to build very snappy mobile web apps with some basic frontend code.

    In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls. Even better, the layout can even expand to display properly in regular desktop browsers such as Chrome or Firefox.

    Read More Demo

    How to Create an Video Player in jQuery, HTML5 & CSS3

    June 28, 2012 | CSS2 / CSS3.0, HTML5, Video & Audio
    How to Create an Video Player in jQuery, HTML5 & CSS3

    In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

    Read More Demo

    jStorage – store data locally with JavaScript

    June 27, 2012 | HTML5, jSON, Other Libraries, Plugins, Web, XML
    jStorage - store data locally with JavaScript

    jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved.jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.

    jStorage makes use of HTML5 local storage where available and userData behavior in Internet Explorer older versions. Webkit SQLite is not supported.

    Read More Demo

    SeuratJS : Raphaël plugin for beautiful pointillized Animations

    June 26, 2012 | Animation, HTML5, Other Libraries, SVG Tutorial
    SeuratJS : Raphaël plugin for beautiful pointillized Animations

    SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG. Seurat makes it extremely easy to alter what primitives are generated (how they look and where they appear) and how they animate.

    SeuratJS uses the HTML5 canvas to parse color data and, because of this, the library operates entirely on the client side.

    Read More Demo

    How To Build A Real-Time Commenting System in PHP, Ajax, jQuery, HTML5

    June 17, 2012 | Ajax, HTML5, jSON, PHP
    How To Build A Real-Time Commenting System in PHP, Ajax, jQuery, HTML5

    The Web has become increasingly interactive over the years. This trend is set to continue with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience.

    In this tutorial, I’ll show how to convert a basic blog commenting system into a real-time engaging experience where you’ll see a comment made in one browser window “magically” appear in a second window.

    Read More Demo

    Html5 loader : jQuery preloader plug-in

    June 16, 2012 | HTML5, jSON, Plugins, Web
    Html5 loader : jQuery preloader plug-in

    Now you can preload your HTML 5 page with this nice plug in, passing data via JSON. You can customize it changing colors and style. It can preload video, audio, images and js

    Read More Demo

    Create a Beautiful Password Strength Meter in jQuery

    June 13, 2012 | Forms, HTML5
    Create a Beautiful Password Strength Meter in jQuery

    In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin. Only when a sufficiently complex password is entered, will the user be able to continue with their registration.

    Read More Demo

    jQuery Animated Percentage Loader

    June 8, 2012 | Animation, HTML5, Plugins
    jQuery Animated Percentage Loader

    jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

    A jQuery plugin that utilises HTML canvas to show an animated percentage loader widget suitable for loading screens or displaying feedback during long-running tasks.

    Read More Demo

    Make a snake game using HTML5 canvas and jQuery

    June 7, 2012 | Games, HTML5
    Make a snake game using HTML5 canvas and jQuery
    Learn to make a simple snake game using HTML5 canvas and Jquery.
    Read More Demo