Best jQuery HTML5 Plugins & Tutorials with Demo

    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.

    How to Make Auto-Advancing Slideshows with jQuery & HTML5

    How to Make Auto-Advancing Slideshows

    One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery.