Fork me on GitHub

Utility plugins

eventPause.js

jQuery gave us much clean and faster way to bind events with cross browser support, deprecating obtrusive inline event handler , addEventlistener() and attach event (as they are browser depended). You don’t need to worry about the event handlers assigned for a particular event , you just can pause and active it whenever you want.
But there some situation comes where we just want to pause event (or say unbind it temporally). For that we unbind events and bind it again when we need.
But this become painful on binding event again when there is no reference of event handler or you don’t have its scope, or you just don’t know what event handlers are assigned to a particular event.

So why not have a plugin which can pause any events or group of events temporarily.
eventPause.js is perfect plugin that can serve you in this case. It is a simple and light weight plugin, providing a lot of methods to pause an event temporarily. You don’t need to worry about the event handlers assigned for a particular event , you just can pause and active it whenever you want.

Download

Examples

Simple pause and active example
Click or hover on me

##Pause
 $('.pause').click(function(e) {
   $('.testDiv').eventPause();
  /* OR
   $('.testDiv').eventPause('pause'); */
});

#Active
$('.active').click(function(e) {
   $('.testDiv').eventPause('active');
});

Pause/active along with all descendants
Click or hover on me
Click me

##Pause
 $('.pauseChild').click(function(e) {
   $('.testDiv').eventPause('pauseChild');
});

#Active
$('.activeChild').click(function(e) {
   $('.testDiv').eventPause('activeChild');
});

Pause/active specific events
Hover event is paused so only click event will work after pausing.
Click or hover on me

##Pause
 $('.pauseEvent').click(function(e) {
   $('.testDiv').eventPause('hover');
   //can be more than one event by space seperated
});

#Active
$('.activeEvent').click(function(e) {
   $('.testDiv').eventPause('active','hover');
});

Enable/disable pause and active events
After disable you are not able to pause or active
Click or hover on me

##Enable
 $('.enable').click(function(e) {
   $('.testDiv').eventPause('enable');
});

#Disable
$('.disable').click(function(e) {
   $('.testDiv').eventPause('disable');
});

Documentation

Plugin Methods


Method Description
pause Pause an event or group of event of element .
active Active events of a element.
pauseChild Pause events of that element along with events of all its descendants elements.
activeChild Active events of that element along with events of all its descendants elements.
toggle toggle the current state of a element (active to paused , paused to active)
enable Enable the element to change the current state. (does not accept second argument)
disable Disbale the element to change the current state.(does not accept second argument)
state Give current state of element. It will return four combination ex: paused-enabled means event is paused and state change in enabled. (does not accept second argument)

Global Methods


Method Description
activeAll Active all elements which are paused using eventPause plugin.
enableAll Enable all the element(in which eventpause plugin is used) to chnage the current state.
disableAll Disable all the element(in which eventpause plugin is used) to chnage the current state.


eventPause accept two parameter 1st method and 2nd events(multiple event space seperated) where both or optional. We will see some combination of way in which we can use this plugin.

Plugin Methods Example


Calling without any parameter.

  $('.selector').eventPause();
  
It will activate pause mode for all events of selector.

Calling with only event list

  $('.selector').eventPause('click hover');
  
It will activate toggle mode for click and hover event.

Calling with only method

  $('.selector').eventPause('pause');
  
It will activate pause mode for all events of selector.
**Other method are also called in same way.

Calling with method and event list


    $('.selector').eventPause('pause','click hover');
   
It will activate pause mode for click and hover event.
** enable,disable and state method does not accept second argument.

Global methods example


Calling global method

  $.event.activeAll();
  
Global method does not accept any argument.

Concept

This documentaion is moved to http://ignitersworld.com/lab/eventPause.html. It will be no longer maintained here .