Best jQuery Events Plugins & Tutorials with Demo

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.

jQuery.event.move : Drag event plugin

jQuery.event.move : Drag event plugin

Custom events ‘movestart’, ‘move’ and ‘moveend’ for jQuery.Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.

Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making responsive interfaces. That said, movestart, move and moveend events deliberately echo dragstart, drag and dragend events, with one significant difference: where the drag event fires continuously whether you have moved the pointer or not, the move event fires only after the pointer has been moved.

breakpoints : Trigger jQuery events for your responsive design

breakpoints : Trigger jQuery events for your responsive design

Trigger jQuery events for your responsive design breakpoints!.Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.

jQuery UI Touch Punch : Touch events for jQuery UI with Demo

jQuery UI Touch Punch

A duck punch for adding touch events to jQuery UI.This little library was written to punch in touch events to jQuery UI by providing touch proxies that simulate mouse events.

Hammer.js : A jQuery library for multi touch gestures with Demo

Hammer.js : A jQuery library for multi touch gestures with Demo

Hammer.js is a javascript library (that depends on jQuery) that can be used to control gestures on touch devices.Hammer.js has been tested on iPad1 with iOS5, iPhone4 with iOS5, Samsung Galaxy S with Android 2.3.3 and Google Chrome 17. On a desktop browser the mouse can be used to simulate touch events with one finger. It supports the following gestures:

  • Tap
  • Double tap
  • Hold
  • Drag
  • Transform

TouchSwipe : A jQuery plugin for Touch devices

TouchSwipe : A jQuery plugin for Touch devices

TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.

Features :

  • Detects swipes in 4 directions, “up”, “down”, “left” and “right”
  • Supports single finger or double finger touch events
  • Supports click events both on the touchSwipe object and its child objects
  • Definable threshold to determin when a gesture is actually a swipe
  • Events triggered for swipe “start”,”move”,”end” and “cancel”
  • End event can be triggered either on touch release, or as soon as threshold is met
  • Allows swiping and page scrolling

jQuery keydown events Plugin : jEscape

jQuery keydown events Plugin : jEscape

This extension captures all the keydown events faster and less time writing code, you’ll profit.

jwerty – Awesome Handling of Keyboard Events

jwerty – Awesome Handling of Keyboard Events

jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear.

Simple use of Event Delegation

jQuery Event Delegation

Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation.



Best jQuery websites design awards