Plugins
Home

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.

iPhone


Sticky Section Headers

Submitted by polarblau on October 8, 2010 - 9:13am

Given the appropriate mark-up structure keeps headers in place while scrolling, known from the iPhone table view.

iPhone/iPad doubletap event halder

Submitted by sanraul on July 31, 2010 - 9:22pm

Enable the use of "doubletap" events on iPhone and iPad devices. The functionality is still available when the plugin is used on Desktop Browser. This means that you don't have to worry about the environment where the plugin is used. Simple register handlers for the click/touch and dblclick/doubletap events.

Example

$(selector).doubletap(
    /** doubletap/dblclick callback */
    function(event){
        alert('double-tap');
    },
    /** touch/click callback (touch) */
    function(event){
        alert('single-tap');
    },
    /** doubletap/dblclick delay (default is 500 ms) */
    400
);

Mobile Slideshow

Submitted by matteotrap on July 26, 2010 - 5:51pm

Mobile slideshow is an iPhone and iPad optimized slideshow that uses hardware acceleration of Webkit browsers.

Written by: Matteo Trapella / Habla Webdesign
Web: http://www.trapella.it
Twitter: http://twitter.com/HablaWebdesign

jQuery Touchwipe iPhone, iPad, iPod Touch Gestures Event

Submitted by netCU on July 15, 2010 - 4:29pm

jQuery Touchwipe - Obtain wipe gesture from touchscreens

Tested with iPhone, iPad and iPod Touch, should also work on Android Platform

The small 1 KB library allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery (see demo below). Should also work with Android touchscreens.

Website: netCU Internet Agency
Project site: jQuery Touchwipe Library (Demo, Usage, Download)

Usage

$("#imagegallery").touchwipe({
    wipeLeft: function() { alert("left"); },
    wipeRight: function() { alert("right"); }
});

Usage together with jQuery Cycle Plugin for image galleries (see also demo)

SliderNav - Alphabetical Navigation Menu System

Submitted by mdolon on May 23, 2010 - 2:44pm

SliderNav is a JQuery plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It is made mainly for alphabetical listings but can be used with anything, though longer words can look a bit awkward. The plugin automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list. The overflow: auto; property is also used for the actual content so you can use your mousewheel to scroll through the content as well.

The plugin has been tested (and works fine) on Firefox 3, Chrome 5, IE7, Safari 4 and Opera 10.

Usage and Example

You can find complete usage instructions and a live demo on the plugin release page.

iGrowl, a simple jQuery plugin for iPhone notifications

Submitted by 0100 on May 22, 2010 - 7:25pm

This mimics the iPhones native Growl notifications. I first saw these in Tweetie (now Twitter for iPhone) when hitting the retweet button.

It has three options, to use simply include the jQuery Library and then any of these three things:

1. AJAX Spinner
$.iGrowl(1,"Please wait..."); //1 = ajax spinner

2. Success!
$.iGrowl(2,"Success!"); //2 = the tick icon

3. Error
$.iGrowl(3,"Error"); //3 = the cross icon

The idea is a simple notification system for iPhone and works perfectly for AJAX callbacks. You can customise the message to display anything you like and it works on all the modern browsers. It was intended for use only on Apples mobile devices but works and looks great in Firefox, Safari and Chrome and doesn’t look too bad in IE either.

jScrollTouch iPhone / iPad scrollable content

Submitted by drottemberg on May 5, 2010 - 10:14am

jScrollTouch adds the ability to scroll different parts of the screen in iPhone/iPad/iPod Safari without moving the rest it.

You don't need to detect the User Agent because it doesn't have any side effects.

Touch and Gesutre Support Identification

Submitted by jeffreysambells on May 3, 2010 - 11:58am

Usage:

if ($fn.browserTouchSupport.touches) {
// Touch specific interactions
}

Support:
bool $.fn.browserTouchSupport.touches // all touches supported
bool $.fn.browserTouchSupport.gestures // all gestures supported
bool $.fn.browserTouchSupport.touchstart
bool $.fn.browserTouchSupport.touchmove
bool $.fn.browserTouchSupport.touchend
bool $.fn.browserTouchSupport.gesturestart
bool $.fn.browserTouchSupport.gesturechange
bool $.fn.browserTouchSupport.gestureend

jFlick

Submitted by stevegough on April 14, 2010 - 8:01pm

jFlick is a jQuery extension that captures the flick/swipe gestures for Droids/iPhones/etc and lets you write custom handlers to deal with them. By default the X-axis is evaluated, with a threshold of 15 pixels to a swipe, and just returns true if a flick is detected. The threshold of 15 will capture almost everything as a flick except a stationary tap.

Parameters

The only method is detectFlicks and it will accept these override values:

  • axis: x or y
  • threshold: some positive number
  • flickEvent: any function

For the flickEvent, the data object passed to it will contain the variable ''direction'' which is a string detailing which direction the flick was in.

Example


$('div#flickable')
.detectFlicks({
axis: 'y',
threshold: 60,
flickEvent: function(d) { alert('flick detected: ' + d.direction);