Best jQuery Web Plugins & Tutorials with Demo

Ultimate Google Web Fonts – code generator

Ultimate Google Web Fonts - code generator

Ultimate Google Web Fonts code generator is a tool that allows you to instantly access all of Google’s open source web fonts, preview and generate code to use them with any website, regarding of technology used (PHP, Joomla, Magento, ROR, pure HTML, ASP.net, etc). List of available fonts is updated from Google automatically, and currently there are more than 650 fonts to choose from.

With its unique system for previewing fonts on any website, it is fun and easy to use. You can take full control over typography in your site in a matter of minutes.

Features:

  • Live, instant preview of any Google Web font with any site
  • Top-notch performance: only 1 css file and one style block for any number of fonts added
  • Supports all available font variants (e.g. light, bold, italic, black, etc.)
  • Allows additional custom CSS for each font (e.g. red color, etc.)
  • Ajaxed, easy interface
  • Loads a list of fonts automatically

jHtmlArea : WYSIWYG HTML Editor for jQuery

jHtmlArea : WYSIWYG HTML Editor for jQuery

A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.

Create a Minimal Coming Soon Page using HTML5 and CSS3

Create a Minimal Coming Soon Page using HTML5 and CSS3

In this tutorial we are going to create a Coming Soon page using HTML5 and CSS3 with a minimalist style and light colors. We will use the minimal Coming Soon page designed in Photoshop by Stelian a few days ago. For the countdown timer we will use jQuery and the jQuery countdown plugin from tutorialzine.com. Of course we will customize it a bit to match our design.

tracking.js : Real Time tracking techniques by the Camera

tracking.js : Real Time tracking techniques by the Camera

The tracking.js brings to web elements tracking techniques of a real scene captured by the camera, through natural interactions from object tracking, color markers, among others, allowing the development of interfaces and games through a simple and intuitive API.

GetEmPixels : Obtain an element’s em value in pixels using JavaScript

GetEmPixels : Obtain an element’s em value in pixels using JavaScript

Allows you to accurately obtain an element’s em value in pixels using JavaScript. No more blindly dividing by hard-coded values.

How to build a realtime jQuery plugin

How to build a realtime jQuery plugin

The jQuery realtime library is a first attempt at making it really easy for anybody to add realtime data to a web page by just adding markup to a page and using jQuery and a jQuery library.

In this tutorial we’ll create a jQuery plugin that makes it really easy to add realtime content to a page by simply adding some markup. First, we’ll cover how to use a service called Pusher to subscribe to realtime data. Then we’ll define a way of marking up an HTML5 document with ‘data-*’ attributes in a way which can then be queried by our realtime jQuery plugin and converted to realtime data subscriptions. Finally, we’ll create the jQuery plugin which will use the attributes to subscribe to data and instantly display updates within the page.

jQuery totalstorage : Local Storage Plugin

jQuery totalstorage : Local Storage Plugin

A jQuery plugin to manage local storage and cookies simultaneously in a simple interface.

We found that HTML5 Local Storage gave us the best return in terms of reliability and speed. Internet Explorer compatibility? Not so much. So we wrote totalStorage, a jQuery plugin that combines the ease and usefulness of totalStorage with the universal compatibility of cookies (along with some helpful tools like automatic JSON encoding/decoding).

  • The browser doesn’t support local storage it will fall-back to cookies! (Using the wonderful $.cookie plugin).
  • Send it strings, numbers even complex object arrays! TotalStorage does not care. Your efforts to defeat it will prove futile.
  • Simple as shit. jStorage and some other very well-written plugins provide a bevy of options for expiration, security and so forth. Frequently this is more power than you need and vulnerable to confusion if you just want it to work (JWITW)

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.