Best jQuery HTML5 Plugins & Tutorials with Demo

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.

Subway Map Visualization jQuery Plugin

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

OIPlayer jQuery plugin

OIPlayer jQuery plugin

OIPlayer inits and controls the video- or audioplayer made by modern browsers with the html5 video- or audiotag. It was developed for the Open Images Platform. It features a fallback mechanism and enables the use of three players in a generic way. It sifts through the sources inside the media tag to find a suitable player, replaces the mediatag with itself and enables some generic controls. Is supports the html5 media-tag itself, the Java applet Cortado for the ogg media format (ogv, oga) for browsers that have Java but don’t support the html5 media-tags and a Flash player, in this case FlowPlayer for (mp4, h.264, flv).

How to Build Cross-Browser HTML5 Forms with jQuery

How to Build Cross-Browser HTML5 Forms with jQuery

In this pedagogical tutorial, you are going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

Gradient text jQuery plugin

Gradient text jQuery plugin

GradientText is an ultra small, easy to use jQuery plugin that will give your standard H1, H2, H3, etc. headers a gradient text color.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

We’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.