Best jQuery HTML5 Plugins & Tutorials with Demo

    Open Standard Media (OSM) Player in jQuery

    Open Standard Media (OSM) Player in jQuery

    Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

    A Snazzy Animated Pie Chart with HTML5 and jQuery

    A Snazzy Animated Pie Chart with HTML5 and jQuery

    In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

    Creating a CSS3 Generator with CSS3, HTML5 and jQuery

    Creating a CSS3 Generator with CSS3, HTML5 and jQuery

    Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.

    The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.

    BeautyTips a jQuery tooltips plugin

    BeautyTips a jQuery tooltips plugin

    BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips associated with a html element on the page. The thing I like best about BeautyTips is it’s limmitless ways to configure the look and feel and event triggering behavior. For example, with BeautyTips it would be relatively easy to match the tooltips used on popular websites like Netflix, Google Maps, Hulu, or Facebook.

    HTML5 Grayscale Image Hover with jQuery

    HTML5 Grayscale Image Hover with jQuery

    With HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. Use HTML5 & jQuery to dynamically clone color images into grayscale

    How to Add Audio and Video on your Website using jPlayer plugin (jQuery)

    How to Add Audio and Video on your Website using jPlayer plugin (jQuery)

    Today we continue jQuery lessons, and will talk about adding customizable player for audio or video files to our website. This new plugin (jPlayer) pretty well: allow us play media files, pause, change volume, it even have all necessary controls (which you can see in any media player). Also it allow us to change all its styles (all styles of interface loceted in single css file). More, it support HTML5 and able to work quite in all possible browsers. Here are supported formats of media files: mp3, ogg, m4a, m4v, ogv, wav etc.

    How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

    In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

    Create a Posticks (Sticky Notes) app with HTML5, CSS3 and jQuery

    While I was on vacation in Dominican Republic, I had some free time to work in a small application that creates Posticks notes, or sticky notes, in the browsers and save it in the localStorage of the browser. If you want to know what I am talking about you can visit the demo.

    jQuery File Upload Plugin With Drag ‘n’ Drop Support

    jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.

    The plugin is based on open standards like HTML5-JavaScript and doesn’t use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

    Shutter Effect Portfolio with jQuery and Canvas

    In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.