Best jQuery Events Plugins & Tutorials with Demo

    bindWithDelay jQuery Plugin

    bindWithDelay jQuery Plugin

    jQuery Plugin For Delayed Event Execution.It prevents a function call from happening EVERY time an event is fired from the browser. Rather than implementing custom timeout code, just add in this plugin and simplify your code.

    It works with existing code that uses the bind() function. Just add an extra parameter (timeout in milliseconds), and an optional boolean value if you would like to enable throttling.

    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

    jQuery Mobile Events

    jQuery Mobile Events

    A collection of mobile event plugins for jQuery.This is a series of plugins that create additional events that can be used in combination with jQuery when developing for mobile devices. The events are also compatible with desktop browsers to ensure ultimate compatibility for your projects. In time, we will update the Repository to include some very basic demos to get you started with using the events, but for now, we’ve put together a list of the events that are provided, and what they do.

    As explained, the events are each triggered by native touch events, or alternatively by click events. The plugin automatically detects whether the user’s device is touch compatible, and will use the correct native events whenever required. It is hoped that these events will help to aid single-environment development with jQuery for mobile web app development.

    Rubberband : jQuery plugin for adding responsive breakpoint events

    Rubberband : jQuery plugin for adding responsive breakpoint events

    Rubberband is a jQuery plugin for adding responsive breakpoint events. Sometimes you need to know when a responsive page changes. Rubberband allows scripts to act on media query changes in real time by making use of the browser’s internal media query matching system, window.matchMedia.

    jQuery Touchwipe Plugin use your iPhone, iPad or iPod Touch

    jQuery Touchwipe Plugin use your iPhone, iPad or iPod Touch

    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.

    PreloadJS : Javascript to Manage and Co-ordinate the loading of assets

    PreloadJS : Javascript to Manage and Co-ordinate the loading of assets

    PreloadJS is a library to make working with asset preloading easier. It provides a consistent API for loading different file types, automatic detection of XHR (XMLHttpRequest) availability with a fallback to tag-base loading, composite progress events, and a plugin model to assist with preloading in other libraries such as SoundJS.

    PreloadJS The wrapper that manages all preloading. Instantiate a PreloadJS instance, load a files or manifest, and track progress and complete events.

    dumbFormState.js : jQuery Html5 plugin Automatically saves Form State

    dumbFormState.js : jQuery Html5 plugin Automatically saves Form State

    This jQuery html5 plugin automatically saves and persists form state on the client-side across page requests without need of server-side state management or cookies. ALL the major browsers support this!

    features

    • keeps the state of form entries in browser session or across sessions without cookies
    • able to choose form entries not to persist
    • works across multiple forms and pages
    • automatically persists form data without submit
    • can remove persisted data in a form, a session, local or all
    • plays nicely with your form events
    • fails gracefully on unsupported devices

    enquire.js : Handling CSS media queries with JavaScript

    enquire.js : Handling CSS media queries with JavaScript

    Enquire.js is a standalone JavaScript library for programmatically responding to CSS media queries.The library allows us to define any number of media queries and fire events when they are matched (or not matched).

    Features:

    • Deal with your media queries being matched (and even unmatched!)
    • Respond to browser events with aplomb
    • And if you want to get really fancy, run one-time setup routines

    Screw : Dynamic Html Content loading jQuery Plugin

    Screw : Dynamic Html Content loading jQuery Plugin

    Screw, a word I re-coined from scroll + view, is a jQuery plugin which loads HTML as a user scrolls the webpage. Screw will help you save bandwidth by only loading content as it is scrolled into view. Screw can also be used to create continuously scrolling, bottomless pages where content is appended to the bottom as the user scrolls.

    jQuery.Screw to load images when the image is in the viewport. Any images which are positioned inside the viewport when the webpage loads are loaded immediately. Images positioned below the viewport are not loaded until each image is scrolled into view. To prevent an image from loading immediately when the webpage loads, you must provide sufficient padding or additional content so the image is not inside the viewport.

    Mousetrap : Keyboard shortcuts in Javascript

    Mousetrap : Keyboard shortcuts in Javascript

    A simple library for handling keyboard shortcuts in Javascript.Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.4kb minified and gzipped.Any keyboard event that has been bound can be triggered by passing in the string you used when you bound it originally.Note that this is not actually triggering a key event in the browser. It is simply firing the event you bound to that key within mousetrap

    The feature was inspired by Gmail. Any keys separated by a space will be considered a sequence. If you type each key in order the final one in the sequence will trigger the callback. If you type a key not in the sequence or wait too long the sequence will reset.Any key events that would normally fire for keys within a sequence will not fire if they are pressed within the context of that sequence.