Best jQuery Web Plugins & Tutorials with Demo

    Vague.js : jQuery Blur any kind of Html Element

    Vague.js : jQuery Blur any kind of Html Element

    Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters. This script is crossbrowser and it was tested on:

    • Firefox 10 +
    • Chrome 18 +
    • Safari 6.0 +
    • IE 7 +

    Window postMessage jQuery plugin

    Window postMessage jQuery plugin

    Modern browsers now support cross-window/cross-domain/cross-origin messaging through window.postMessage.postmessage is a simple wrapper for window.postMessage and the window message event, for those who wish to use this feature in a more jQuery-like way.postmessage falls back to window location hash polling for browsers that do not support window.postMessage (i.e., IE7).postmessage allows messaging back and forth using JSON where window.postMessage only allows simple string-based messages.postmessage also allows for complete request/response roundtrips using success/error callbacks modeled after jQuery.ajax.postmessage is tested on Safari 4, WebKit (Nightlies), Chrome 4, Firefox 3, IE8, IE7 and Opera 10.

    Dropzone.js : jQuery drag’n’drop File Upload library

    Dropzone.js : jQuery drag'n'drop File Upload library

    Dropzone.js is a light weight JavaScript library for jQuery that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

    Features:

    • Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
    • Multiple files and synchronous uploads
    • Progress updates
    • Support for large files

    Create a Cool Website with Fancy Scrolling Effects in jQuery

    Create a Cool Website with Fancy Scrolling Effects in jQuery

    In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.This tutorial will be a walkthrough of my design process for a simple portal site that presents all of my websites and social profiles. Each website has its own individual section in a series of ‘slides’ laid out vertically. With the help of some cool jQuery plugins clever scrolling and parallax illusions are added to inject an element of fun and novelty to the site.

    Create a Pinterest Feed jQuery Plugin Using AJAX & jQuery Isotope

    Create a Pinterest Feed jQuery Plugin Using AJAX & jQuery Isotope

    In our latest jQuery social network tutorial we are going to create a jQuery plugin to display Pinterest feeds via AJAX from either a username or pinterest board and display them in a masonry style wall using jQuery Isotope.

    The plugin will also include code to display time since posted, options to set the number of feed items to display plus Facebook and Twitter share links to help boost the traffic to your pins.

    Link Scrapper TextBox – jQuery Plugin

    Link Scrapper TextBox - jQuery Plugin

    This jquery plugin displays a textbox to enter text. When you enter a URL in the textbox, the plugin creates a data box for a link having the link title, description and an image. The plugin works like a URL scrapper and these scrapped values about the URL are available to you as javascript variables.

    How to Make a Single Page Website in jQuery

    How to Make a Single Page Website in jQuery

    This tutorial explains how to create a vertical-scrolling single page website in four steps using jquery.There are at least 3 kinds of Single Page websites. The basic idea is that all content is placed on one page, but only a portion of it is centered on your computer screen at a given time. Then you can watch the old content slide away when you click a link, instead of loading a whole new page. Often, the scroll bar is still visible on the side, so you could actually drag it up and down and see the whole page at once.

    jAnalytics : jQuery Add Google Analytics stats to your website

    jAnalytics : jQuery Add Google Analytics stats to your website

    With jAnalytics you can add Google analytics stats and event tracking to your website. It will automaticly add event tracking to your outbound, email and download links.

    Features:

    • Add google tracking code to your website
    • Optitional track email links
    • Optitional track outbound link clicks
    • Optitional track form submits
    • Optitional track download links from specific file extensions
    • Automaticly adds event tracking to the different links

    Fuel UX : Clean and lightweight UI controls

    Fuel UX : Clean and lightweight UI controls

    Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

    SFX.js : Simple JavaScript audio wrapper for easy Sound Effects

    SFX.js : Simple JavaScript audio wrapper for easy Sound Effects

    Simple audio wrapper for easy sound effects on your website. SFX.js plays OGG files when browser supports them, and falls back to MP3 otherwise. OGG is prioritized because it is an open format with developer friendly licensing, unlike MP3… If a browser support for OGG files will be ubiquitous, I’d like to drop support for MP3 in SFX.js.

    SFX works in Chrome, Opera, Firefox, Safari (with issues), and IE9+ (haven’t tested other browsers). Supported file types are:

    • Chrome: OGG + MP3
    • Opera: OGG
    • Firefox: OGG
    • Safari: MP3
    • IE9: MP3