Best jQuery HTML5 Plugins & Tutorials with Demo

    Infographic Charts and Graphics HTML Tags Library

    Infographic Charts and Graphics HTML Tags Library

    This custom JS charting library created by PSDDude from 0 implements custom HTML tags which allow creating charts and graphs for infographics.

    It is a light-weight, pure JavaScript charting library (NO jQuery or other libraries required) which makes use of HTML5 technologies and works on all modern browsers including IE, Chrome, Firefox, Opera, Safari.To use it you do not need to know any JavaScript, as all the charts are added as HTML tags. You can follow the very straight forward documentation which also contains examples.

    The library allows creating: – Piecharts and doughnuts – Shape graphs – you can transform any image(PNG) into a graph – Shape bar graphs – use any image (PNG) to construct a bar chart – Line graphs – Barchart graphs

    jQuery Cropbox plugin

    jQuery Cropbox plugin

    jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).

    This plugin depends only on jQuery. If either Hammer.js or jquery.hammer.js is loaded, the cropbox plugin will support gestures for panning and zooming the cropbox. Similary, if the jquery.mousewheel.js plugin is loaded, then the cropbox plugin will support zoom in & out using the mousewheel. All dependencies on third party libraries (other than jQuery) are strictly optional. Support for CommonJS and AMD loading is built in.

    In browsers that support the HTML5 FIle API and Canvas API, the cropbox plugin provides mehtods to crop the image on the client and obtain the resulting cropped image as a Data URL or a binary blob to upload it to the server.

    Bootstrap video player – jQuery plugin

    Bootstrap video player - jQuery plugin

    A customizable HTML5 video player plugin for jQuery based on bootstrap UI.

    Features:

    – easy to Customize with css
    – support multiple videos in one page
    – simple use of HTML5 video tag
    – show pause/play button
    – show progress bar
    – show video timer
    – show & set volume value 1..10
    – enable full screen button
    – enable auto hide control bar
    – enable auto play

    Easy Audio Player with Html5 & JavaScript

    Easy Audio Player with Html5 & JavaScript

    Easy Audio Player it is a powerful HTML5 audio player for your website with responsive layout and full API spport, it runs with the new HTML5 audio engine and if its not supported, it will use Adobe Flash fallback. Packed with four skins with various styles it can be used in any type of layout and of course the skins can be modified.

    HTML5 Easy Audio Player with JavaScript

    HTML5 Easy Audio Player with JavaScript

    Easy Audio Player it is a powerful HTML5 audio player for your website with responsive layout and full API spport, it runs with the new HTML5 audio engine and if its not supported, it will use Adobe Flash fallback. Packed with four skins with various styles it can be used in any type of layout and of course the skins can be modified.

    Features:

    • Fully Responsive & Mobile Optimized (Smartphones & Tablets).
    • Support for old browsers like IE7 and IE8.
    • Full API support.
    • All buttons are optional.
    • Packed with tone of options allowing you to control the layout and skin.
    • Autoplay, Loop, Volume.

    rainyday.js : Simulating raindrops falling on a window

    rainyday.js : Simulating raindrops falling on a window

    The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface.rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components.

    Chart.js: Simple HTML5 Charts using the Canvas element

    Chart.js: Simple HTML5 Charts using the Canvas element

    Chart.js easy, object oriented JavaScript charting libaray with html5 canvas for designers and developers. It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

    Filterize Responsive CSS3 Portfolio Gallery

    Filterize Responsive CSS3 Portfolio Gallery

    Filterize. CSS3 portfolio gallery is made to present your projects, images and references with ease and style.

    Features:

    • Clean design and commented code
    • Easy to customize to fit your design and color pallete
    • Made with pure CSS3 and HTML5
    • Responsive and adaptive to various screen sizes
    • Category filters
    • 3 ready themes
    • 4 column layouts for each theme
    • 2 columns
    • 3 columns
    • 4 columns
    • Full width layout
    • Animated overlays
    • Quick links for better user experience
    • Lightbox for detailed image and project presentation
    • Lightbox navigation
    • Custom scrollbars

    HTML5 Drag And Drop To Create A Shopping Cart

    HTML5 Drag And Drop To Create A Shopping Cart

    The release of HTML5 introduced native Drag and Drop functionality to modern web-browsers. This means it is now possible to have movable elements on screen without the aid of frameworks like jQuery. This week we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

    Check File Size Before Form Submit with Html5 & jQuery

    Check File Size Before Form Submit with Html5 & jQuery

    Checking the file size before submitting the form has always been like a forbidden fruit to us, that’s because there was no easy way to access clients’ file system, which can return the exact size of a file before sending it to the server. Old browsers have no inbuilt capability, and Javascript won’t do it, so normally people would use flash to calculate the file size in HTML upload forms, and most of us just preferred to skip the client part, letting server handle the problem.

    But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.