Best jQuery Web Plugins & Tutorials with Demo

Extract URL content like Facebook with PHP and jQuery

Extract URL content like Facebook with PHP and jQuery

You may have seen Facebook’s technique that extracts content of remote URL when a user types a URL in the status text-box filed. In this article, we will try to create a similar type of Ajax based URL content extractor using jQuery and PHP.

jQuery.LazyJaxDavis : Makes everything ajaxify with flexible URL

jQuery.LazyJaxDavis : Makes everything ajaxify with flexible URL

Makes everything ajaxify with flexible URL routing powered by html5 history API.JQuery.LazyJaxDavis brings the power of history.pushState to static websites.This changes all location changes to dynamic – ajax based.

shake.js : ‘shake’ event JavaScript plugin for mobile web browsers

shake.js : 'shake' event JavaScript plugin for mobile web browsers

A custom ‘shake’ event JavaScript plugin for mobile web browsers using device accelerometer.Your web browser must support the devicemotion event for this plugin to work. Shake.js uses built-in feature detection to determine if it can run in your web browser. It will terminate silently on non-supporting browsers.

Supported Browsers:

  • iOS Safari 4.2.1 (and above)
  • Android 4.0.3 (default browser)
  • Opera Mobile (Android)
  • BlackBerry PlayBook 2.0
  • Firefox for Android
  • FirefoxOS Devices

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)