Best jQuery HTML5 Plugins & Tutorials with Demo

    Create – On-site web editing interface with jQuery

    February 24, 2012 | HTML5, Web
    Create - On-site web editing interface with jQuery

    Create, from the Midgard Project, is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

    The user interface philosophy behind Create is simple: all content that you are allowed to change becomes editable, right there on the page you’re reading. Any modifications you make are retained in your browser and can be sent back to the CMS with a push of a button. With Create, it is time to stop filling forms and to start communicating with your web audience.

    Read More Demo

    turn.js – jQuery plugin Page Flip effect for HTML5

    February 7, 2012 | HTML5, Plugins, Web
    turn.js - jQuery plugin Page Flip effect for HTML5

    Turn js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5. Being inspired by the effect of iBooks and Maps for iOS, I created two classes: one for manipulating the overall publication and another for each individual page. The last one is completely independent, in that it offers an API for creating its own implementations.Having some features :

    •  Uses Hardware acceleration
    • Works on tablets and smartphones
    • Easy to manipulate
    • Lightweight, only 15K
    Read More Demo

    Bear CSS : jQuery build a solid stylesheet foundation based on your markup

    February 6, 2012 | CSS2 / CSS3.0, HTML5, PHP, Web
    Bear CSS : jQuery build a solid stylesheet foundation based on your markup

    Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

    Bear CSS was created using a combination of HTML5/CSS, jQuery and PHP, with some help from the following plugins:

    • PHP Simple HTML DOM Parser
    • Uploadify
    Read More Demo

    Response JS : jQuery plugin for mobile-first progressive enhancement in HTML5

    February 5, 2012 | HTML5, Plugins, Responsive, Web
    Response JS : jQuery plugin for mobile-first progressive enhancement in HTML5

    Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve media progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

    Read More Demo

    Clipping JPEGs Freely With JavaScript : polyClip.js

    January 30, 2012 | Core Java Script, HTML5

    When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

    polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

    Read More Demo

    jQuery HTML5 Placeholder Plugin

    January 28, 2012 | Forms, HTML5, Plugins
    jQuery HTML5 Placeholder Plugin

    The HTML5 placeholder attribute is awesome, unfortunately only supported by some browsers. This plugin replicates the placeholder behavior for unsupported browsers.

    Read More Demo

    Javascript Driven HTML5 Video Player: Dplayer

    January 25, 2012 | Core Java Script, HTML5, Video & Audio
    Javascript Driven HTML5 Video Player: Dplayer

    Dplayer is an open source, easily extend-able, HTML5 video player that allows users to easily embed videos in any page, blog or site using the newest web standards. It mainly makes use of HTML, CSS and JS while featuring as less Adobe Flash as possible (just for fallback) to allow customization with a minimal effort.No browser plugin, no Flash dependencies! You can jump anywhere in the video without waiting while buffering.

    Read More Demo

    Create a self caching website ready for offline usage with HTML5 and jQuery

    January 23, 2012 | HTML5, Web
    Create a self caching website ready for offline usage with HTML5 and jQuery

    In this tutorial we will create a website that is able to cache its own content, including markup, stylesheets and javascripts, as a user browse it. To dynamically restore cached files we use a offline manifest and the local storage. Or in other words: every page a user visited online will be available offline too.

    Please note that the demo application is written in CoffeeScript and must be compiled to JavaScript. If you have Thor installed use the command thor compile:js.

    Read More Demo

    JavaScript PDF Reader : pdf.js

    January 18, 2012 | Core Java Script, HTML5
    JavaScript PDF Reader : pdf.js

    pdf.js is an HTML5 experiment that explores building a faithful and efficient PDF renderer without native code assistance.
    Supported by Mozilla Labs, its goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.

    Read More Demo

    JavaScript Preloader for HTML5 Apps : PxLoader

    January 17, 2012 | Core Java Script, HTML5
    JavaScript Preloader for HTML5 Apps : PxLoader

    PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

    It let’s you monitor download status by providing progress and completed events and it lets you prioritize the order in which items are downloaded. You can even tag groups of files and then prioritize downloads or register for events by tag.

    Read More Demo