Best jQuery Web Plugins & Tutorials with Demo

jQuery Plugin for the IndexedDB API

jQuery Plugin for the IndexedDB API

IndexedDB is a database inside a browser to save and retrieve objects on the browser/client.

The Jquery IndexedDB Plugin is a wrapper over IndexedDB, making it easier to use with Jquery.

  • Don’t worry out browser differences ( setVersion/onupgradeneeded ).
  • Use Jquery promises in place of requests
  • Supports chaining, less verbose syntax

IndexedBD is not supported on all browsers . You can use the IndexedDB polyfill over WebSQL to get the plugin working on Opera, Safari, iPad, iPhone, etc.

Build a Custom Ad Banner Rotator Script with jQuery

Build a Custom Ad Banner Rotator Script with jQuery

In this tutorial I want to demonstrate how we can build a jQuery banner rotator which works even over PHP/Rails caching. You only need to implement the codes on your frontend, which means the settings on your web server do not matter as much. The script will hold an array of content data which matches up based on the image and outbound links. Take a peek at my live sample demo to catch a glimpse into what we will be creating.

Detector : PHP & JavaScript based browser and feature-detection library

Detector : PHP & JavaScript based browser and feature-detection library

Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

Detector dynamically creates profiles using a browser’s (mainly) unique user-agent string as a key. Using Modernizr it records the HTML5 & CSS3 features a requesting browser may or may not support. ua-parser-php is used to collect and record any useful information (like OS or device name) the user-agent string may contain.

With Detector a developer can serve the appropriate markup, stylesheets, and JavaScript to a requesting browser without being completely dependent on a front-end-only resource loader nor a browser-detection library being up-to-date.

ScriptCam : jQuery plugin to manipulate Webcams

ScriptCam : jQuery plugin to manipulate Webcams

ScriptCam is a popular JQuery plugin to manipulate webcams. Take snapshots, detect movement, colors, QR and barcodes, record videoclips and organize videochats.

Impress your clients and visitors with this multi-language and fully customizable library.

Tweet to Unlock with jQuery & PHP

Tweet to Unlock with jQuery & PHP

In this tutorial article, let’s create simple “Tweet to Unlock” feature for your web page using jQuery Ajax and PHP.

Events are triggered when user successfully tweets the page, to capture some information from Twitter, we can add a “listeners” to the actions users perform in Web Intents. Once we know the user has Twitted the page, we can make an Ajax request to a PHP file, which will respond to this request  by sending the unlocked data to user browser. Here’s complete code example of a page which has some content to be unlocked by Twitting.

How to Integrate Simple Parallax with Twitter Bootstrap

How to Integrate Simple Parallax with Twitter Bootstrap

Thanks to the flexibility of Twitter Bootstrap, you’re not in any way limited only to the framework’s default container and grid styles. It can actually be quite easy to introduce new layout options to your site without needing to worry about disrupting Bootstrap’s functionality. With this tutorial, we’ll learn how to do that by integrating a simple scrolling parallax effect to the page.

jQuery.Pin : Pin any element to the top of a container

jQuery.Pin : Pin any element to the top of a container

Ever wanted to pin something to the side of a text? Ever needed a subtle sticky element to quietly hang around as you scroll down?

Jquery.Pin is here to help! Pin any element to the top of a container. Easily disable it for smaller screen-sizes where there’s no room for that kind of shenanigans.

Scroller : jQuery plugin for replacing default browser scrollbars

Scroller : jQuery plugin for replacing default browser scrollbars

Scroller is a bare bones option for completely custom scrollbars that retain a native feel. The scrollbar can be styled using basic CSS and will fall back to the standard browser chrome if JavaScript is disabled. If you find most scrollbar replacements too bloated or convoluted for basic applications, Scroller is the answer.

Pronto : A jQuery plugin for faster page loads

Pronto : A jQuery plugin for faster page loads

Building on concepts like pjax and TurboLinks, Pronto is a simple way to harness the speed increases that HTML5’s pushState() can provide on nearly any site imaginable.

Using a “partial page load” technique, Pronto reduces the over all server load and font-end render time by only updating pieces of a page instead of the entire document. On many sites, basic layout like the header and footer remain generally the same page to page. The overall browsing experience gets a little shot of caffine by only requesting these pieces of markup once, as well as assets like stylesheets, scripts or fonts.

Aware.js : Make Your Site Reader Aware with jQuery

Aware.js : Make Your Site Reader Aware with jQuery

Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader’s behavior without requiring login, authentication, or any server-side processing.