Best jQuery HTML5 Plugins & Tutorials with Demo

    FueledWeb Pro Thumbnail Scroller with jQuery

    May 23, 2012 | HTML5, Plugins, Popup Window, Premium, Slider
    FueledWeb Pro Thumbnail Scroller with jQuery

    FueledWeb Pro Thumbnail Scroller is an advanced multipurpose jQuery plugin, html5 thumbnail scroller and image gallery.It is beautifully designed with 3D like effect and well developed with varieties of customization options, the plugin is perfectly used for product showcase, media gallery or item slider.

    Features :

    • Google font
    • AdvancedLightbox
    • Responsive Design
    • Over 50 plugin options and 25 theme variables
    • Custom look and feel of Scrollbar
    • Option to auto start from center item
    • Option to auto start slideshow with play and pause button
    • 5 Custom Event Handlers:
      • onSwitchItem
      • onSwitchCategory
      • onShowLightbox
      • onHideLightbox
      • onSwitchLightboxItem
    • Custom theming with 3 built in themes
    Read More Demo

    Create an Upload Form using jQuery, CSS3, HTML5 and PHP

    May 23, 2012 | CSS2 / CSS3.0, Forms, HTML5, jQuery UI, PHP
    Create an Upload Form using jQuery, CSS3, HTML5 and PHP

    In this tutorial we will code an Upload Form from Impressionist UI. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. This way we are able to create a very powerful upload form compatible with all browsers. So let’s get started

    Read More Demo

    Build Desktop Apps using HTML, CSS and JS: AppJS

    May 21, 2012 | Core Java Script, HTML5
    Build Desktop Apps using HTML, CSS and JS: AppJS

    AppJS is simple yet powerful resource which allows you to build desktop applications for Linux, Mac and Windows using HTML, CSS and JavaScript.

    Using AppJS you don’t need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. AppJS uses Chromium at the core so you get latest HTML 5 APIs working.

    AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games and allows CSS to decorate widgets as you like.

    Read More

    Custom HTML5 video player with jQuery and CSS3

    May 19, 2012 | CSS2 / CSS3.0, HTML5, SVG Tutorial, Video & Audio
    Custom HTML5 video player with jQuery and CSS3

    We want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari (see Figure 1 for the controls in each browser). If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch.

    All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

    Read More Demo

    jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

    May 17, 2012 | Ajax, HTML5, Other API
    jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

    Today we will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast.

    Yahoo provides a large collection of useful APIs that are free for developers to use. The requirement is that you register your application with through their developer dashboard. The registration is simple and straightforward, and as a result you obtain an application id (look for it under the title of your application). You are going to need this later in the tutorial, but first let’s see how everything would work together.

    Read More Demo

    elFinder : jQuery File manager for web

    May 17, 2012 | Drag & Drop, HTML5, jQuery UI, jSON, Plugins, Web
    elFinder : jQuery File manager for web

    elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

    Features:

    • All operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)
    • High performance server beckend and light client UI
    • Local file system, MySQL, FTP volume storage drivers
    • Background file upload with Drag & Drop HTML5 support
    • Standard methods of file/group selection using mouse or keyboard
    • Move/Copy files with Drag & Drop
    • Archives create/extract (zip, rar, 7z, tar, gzip, bzip2)
    • Quicklook, preview for common file types
    • “Places” for your favorites
    • Calculate directory sizes
    • Thumbnails for image files
    • Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
    • Flexible configuration of access rights, upload file types, user interface and other
    • Simple client-server API based on JSON
    Read More Demo

    Presenteer.js : jQuery HTML5 Presentation Tool

    May 14, 2012 | CSS2 / CSS3.0, HTML5, Plugins, Slider
    Presenteer.js : jQuery HTML5 Presentation Tool

    Presenteer.js is a flexible HTML5 presentation tool that uses CSS3 transforms and transitions to make smooth HTML presentations.Works on Chrome, Firefox, Opera, Android, iPhone and IE9.It uses canvas, where canvas is a selector or jQuery element of the canvas on which the presentation is placed. It is this canvas that will be repositioned with CSS3 transform to slide a certain element into view.

    Read More Demo

    Plupload : A jQuery tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus

    May 8, 2012 | Forms, HTML5, Plugins
    Plupload : A jQuery tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus

    Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

    The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.

    Read More Demo

    Fixie.js : Automatically adds filler content to HTML documents

    May 4, 2012 | Core Java Script, HTML5
    Fixie.js : Automatically adds filler content to HTML documents

    Fixie.js is an open source tool that automatically adds filler content to HTML documents.Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code.

    By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.

    Read More Demo

    Websanova : wPaint jQuery Plugin

    May 1, 2012 | HTML5, Plugins
    Websanova : wPaint jQuery Plugin

    A little jQuery plugin paint app that allows you to draw an image using some basic tools providing ability to load and save the images drawn. This is based on HTML5 canvas and will require a browser with support for canvas to run.

    This is a fantastic jQuery paint plugin from websanova that allows for some basic drawing functionality. It comes with the ability to load and save images and features the websanvoa color picker plugin as well. A great one of a kind plugin.

    Read More Demo