Best jQuery HTML5 Plugins & Tutorials with Demo

    Flot : JavaScript plotting library for jQuery

    February 28, 2013 | Chart & Graph, HTML5
    Flot : JavaScript plotting library for jQuery

    Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

    Just include the Javascript file after you’ve included jQuery.Generally, all browsers that support the HTML5 canvas tag are supported.For support for Internet Explorer < 9, you can use Excanvas, a canvas emulator; this is used in the examples bundled with Flot. it’s not working on your development IE 6.0, check that it has support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support.

    Read More Demo

    Horizontal Navigation Bar with jQuery Dropdown Menus

    February 26, 2013 | CSS2 / CSS3.0, HTML5, Menus
    Horizontal Navigation Bar with jQuery Dropdown Menus

    In this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.

    Read More Demo

    Responsive Gridfolio : JavaScript Html5 Responsive Layout

    February 20, 2013 | Core Java Script, HTML5, Layout, Premium, Responsive
    Responsive Gridfolio : JavaScript Html5 Responsive Layout

    The Responsive Gridfolio has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow).

    The Responsive Gridfolio is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.

    Read More Demo

    Sketch.js : JavaScript Creative Coding Framework

    February 18, 2013 | Animation, Core Java Script, HTML5
    Sketch.js : JavaScript Creative Coding Framework

    Sketch.js handles all that tedious but necessary stuff that would normally slow you down – setting up an animation loop, creating and managing a graphics context for Canvas or WebGL, cross browser and device event binding and normalisation for mouse, touch and keyboard events, handling window resizes… You get the idea.

    Read More Demo

    Layer Styles : HTML5 app for creating CSS3 in a intuitive way

    February 17, 2013 | Core Java Script, CSS2 / CSS3.0, Drag & Drop, HTML5, Web
    Layer Styles : HTML5 app for creating CSS3 in a intuitive way

    Just like you favorite graphic editor – but in your browser. And it creates CSS.A HTML5 app for creating CSS3 in a intuitive way.

    • Colorpicker can pick any color of the element your working on
    • Drag and Drop images onto the page to use them as a background or to pick their colors
    • Color Swatches, Gradients and Styles are locally stored
    Read More Demo

    Make your animated gifs in the browser with jQuery & Html5 : MOTHEREFFINGANIMATEDGIF

    February 16, 2013 | Animation, Drag & Drop, HTML5, Plugins, Web
    Make your animated gifs in the browser with jQuery & Html5 : MOTHEREFFINGANIMATEDGIF

    This plugin helps in make your animated gifs in the browser.This is an H5BP community project. H5BP is where you’ll find a bunch of people creating open source software.

    Read More Demo

    LiteToolTip.js : jQuery Fully Responsive Tooltip Bundle

    February 16, 2013 | HTML5, Plugins, Premium
    LiteToolTip.js : jQuery Fully Responsive Tooltip Bundle

    The First Fully Responsive ToolTip Bundle with 12 Positions, Customizable Color Presets Menu Templates, Image Maps, Hotspots, Videos and Triggers.It’s a lightweight JQuery tooltip plugin that supports 12 positions, multiple background shades, videos, image map areas, image hotspots and menus with responsive appearance on the web pages.

    This plugin uses the HTML5 data-api instead of using default attributes so that the page code passes the W3C’s HTML and CSS validation successfully incase you want to show HTML formatted tooltips.

    Read More Demo

    Make a Web App with Instagram-like Filters in jQuery & CamanJS

    February 13, 2013 | Drag & Drop, HTML5, Image Effects, Plugins
    Make a Web App with Instagram-like Filters in jQuery & CamanJS

    In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins:

    • Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
    • Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
    • jQuery Mousewheel – I am using this plugin to scroll the filter container;
    • In addition, we are using the latest version jQuery at the time of writing.
    Read More Demo

    cgSceneGraph : JavaScript & HTML5 Powerful, cross-platform Animation framework

    February 13, 2013 | Animation, Core Java Script, Games, HTML5
    cgSceneGraph : JavaScript & HTML5 Powerful, cross-platform Animation framework

    The cgSceneGraph is a powerful, cross-platform and very easy-to-use animation framework written in JavaScript for the <canvas> tag in HTML5.It’s full object oriented to ease the development of your applications and games.

    The power of the framework is inside its concept : the framework itself does not render anything, and provides a lot of cool and useful features. It was designed to be extended : you can use or create an infinite number of extensions of the node class (CGSGNode) to be rendered. You are not, and won’t never be, limited to what the framework provides by itself because it is designed to be extended !

    Read More Demo

    blueimp jQuery File Upload

    February 12, 2013 | Drag & Drop, HTML5, Plugins
    blueimp jQuery File Upload

    File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

    Read More Demo