Best jQuery Events Plugins & Tutorials with Demo

Detecting CSS Animation & Transition End with JavaScript

Detecting CSS Animation & Transition End with JavaScript

Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS.

jQuery Scroll Tracker Plugin

jQuery Scroll Tracker Plugin

A jQuery plugin that tracks designated elements’ scroll position relative to the viewport, and adds CSS classes to the element(s) describing the current position. Great for adding CSS transitions to elements as they appear/disappear from view.

Vertical scrolling demo
Horizontal scrolling demo

ProjectBlocker : jQuery solution for Blocking Uncomplete Site

ProjectBlocker : jQuery solution for Blocking Uncomplete Site

A handy jQuery solution for blocking responsive, IE, or incomplete bits from being seen while in development.

Features:

  • Block responsive web design – gives you the ability to demo coded previews without worrying about how the project might look on mobile devices.
  • Block the homepage – show a polite message that a page isn’t yet ready to be viewed to keep visitors out of broken or unfinished areas of preview sites.
  • Block Internet Explorerduh.
  • Customizable and friendly blocking messages – because good UX is the right thing to do.
  • Bypass for developers – for sanity.

Wanker.js : jQuery Easter Egg Plugin

Wanker.js : jQuery Easter Egg Plugin

A jQuery plugin that reveals a takeover when people start excessively resizing their browser.

jquery.wanker.js is the perfect easter egg plugin for designers, photographers, writers, and other creative people with a sense of humor displaying their work on the web wishing their viewers to focus more on their work, and less on the magic of media queries.

jQuery Modify : Event for Input Element Modified

jQuery Modify : Event for Input Element Modified

jQuery plugin that fires event immediately when input element is modified.

Is-Near : Calculates Mouse Position to a Given Element

Is-Near : Calculates Mouse Position to a Given Element

Calculates if the mouse position is near to a given element.

jQuery Appear : Appear Disappear Events

jQuery Appear : Appear Disappear Events

A jQuery plugin provides appear and disappear events to do lazyload, infinite scroll or else effect.

scrollMonitor : jQuery Plugin to Monitor scrolling Elements

scrollMonitor : jQuery Plugin to Monitor scrolling Elements

The scroll monitor allows you to receive events when elements enter or exit the viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element’s visibility and location relative to the viewport.

The code is based on vanilla javascript and has no external dependencies. Except if you want to put it in the head of the document, then you’ll need jQuery for the DOMContentLoaded event.

Demos:

NoFi : Detecting offline States with HTML5

NoFi : Detecting offline States with HTML5

NoFi, for when there’s no WiFi. Uses the native HTML5 API to detect if a user’s internet goes offline and emits a custom offline event for your callbacks.

Finger : jQuery Tap & Gestures event plugin

Finger : jQuery Tap & Gestures event plugin

Finger unifies click and touch events by removing the 300ms delay on touch devices. It also provides a common set of events to handle basic gestures such as flick, drag, press and double tap.
Very small (< 0.5kb gzipped), it is focused on performance and KISS, is well tested and also supports jQuery delegated events.



Best jQuery websites design awards