Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

browser


Title Alert

Description

Plugin for flashing messages in the browser title bar. Useful for notifying users about website events when the browser/tab is out of focus (i.e. chat messages).

Usage example:

$.titleAlert("Hello World!", {
    requireBlur:true,
    stopOnFocus:true,
    duration:10000,
    interval:500
});

Will flash title bar with text "Hello World!", if the window doesn't have focus, for 10 seconds or until window gets focused, with an interval of 500ms

jDownload - A jQuery plugin to assist file downloads

jDownload is a plugin built to assist file downloads and make the download experience more informative and user friendly.

jDownload is built on jQuery UI and displays a UI dialog with information on the downloadable file before asking the user to confirm the download.

For more information please check out http://jdownloadplugin.com

jQuery scrollbarWidth

Calculate the scrollbar width dynamically!

Full documentation, source, and examples are available on benalman.com.

Shakey Shakey

Mini jQuery Plugin to shake the browser window like crazy

jQuery Client Side Database

For small (but rich) read only datasets. No server side anything needed. The data is stored as XML in an HTML comment and can be queried with JSON.

Instructions.

Include the clientdb plugin

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.clientdb.js"></script>

Put your XML data in a hidden div like so

<div id="myDB" style="display: none;"><!--<xml>

  <bookstore>
    <book category="CHILDREN">
      <title>Harry Potter</title>
      <author>J K. Rowling</author>
      <year>2005</year>
      <price>29.99</price>
    </book>
    <book category="WEB">
      <title>XQuery Kick Start</title>
      <author>James McGovern</author>
      <year>2003</year>
      <price>49.99</price>
    </book>
  </bookstore>
 
</xml>--></div>

Instantiate the database and query the JSON object.

json = $.clientdb("#myDB");

Client OS/Browser detect

Based on quirksmode BrowserDetect a wrap for jQuery browser/os detection plugin.

Shortaccesskey - Uniform accesskey for all browsers

Purpose

The shortaccesskey plugin provides an easier and faster way to use the accesskeys assigned to links instead of the standard key combinations like SHIFT+ALT+key and CTRL+key you just press the 'key' assigned to the link.

Features

  • Executes the click events attached to the link using jQuery bind() function.
  • In case of AJAX call, the AJAX call is executed - the page doesn't redirect to another page.
  • Shortaccesskey gets disabled when inside a form element allowing all keys to be used normally.

Orange Toolkit

Orange offers

  • a light weight but powerful html snippet engine
    Write a snippet of plain html, throw a javascript object at it and watch the magic...
    $("#someID").snippet("snippet_name", someObject);
  • keystroke listener
    For highly customizable form (or any other element!) behavior including allowed characters, input validation, function calls on keystrokes, timeouts for delayed event firing.
    $("#someID").listen({13:function(){alert('yummy!'); submitCode();}})
  • create a javascript object from form data by passing in an array of element ids.
  • push json data to a form by passing fillForm an object and an id prefix

maxImage Image Scaling

This plugin will resize targeted images to their max width according to the browser, their ratio, and some simple specs.

Every time a user resizes the browser, the images will resize with it, while retaining it's ratio. The images can resize based on the width only, the height only, or both. I have also added the option to make your image a background image. The plugin find the width of your browser and the ratio of your image and then resizes it accordingly.

Platform Selector

A simple jQuery plugin that adds classes to the body element representing the browser’s environment.