jQuery Timed Event Sequences

One of the very common jQuery / javascript snippets I need regulary is a typical "trigger X in Y seconds". This for the inevitable "can we make this auto change" banners and the like on image heavy sections etc.

I finally got fed up of redoing it every time when they almost always take the same kind of layout and decided to turn it in to a jQuery plugin.

It does work with any jQuery event type, but it is much easier to demonstrate with a click.

Need to give this a good testing in multiple browsers...

1. Zero config

This is with no config; so it will do nothing other than trigger the click. As that would cause your browser to jump around horribly I've used span instead of an 'a' tag.

You'll see that the active class stays in the same place and it's quite boring & uneventful.

Getting it to do things..

Obviously example 1 is pretty much useless, as 90% of the time you want it to do something. We have a few ways of doing that, beforeEvent and afterEvent.

2. Before...

To start off with, lets get the class swapping around. In the example below we use a beforeEvent function to swap what item has the active class attached to it.

You will see the red box swap and change over to each item in turn and eventually move back to the start.

3. After...

You can do almost exactly the same thing, but after the click has happened....

Just to make this one a bit more exciting then changing a function name, I've reduced the time between events down to 2 seconds from 3.

4. Before & after...

In this demo we should probably remove the active class before click, and then re add it afterwards, so we can just combine the previous two examples.

5. Different starting positions

Sometimes you may not want to start the sequence at the begining; for those galleries that start in the middle or those that effect the browser state.

You can set the starting position manually as an option and it will start from that point, allowing you to resume etc.

6. Adding control

You may want to stop / pause the sequence of events, that is now built in, just give it a try

Stop Start Restart Reset to 0 6s interval 1s interval 3s interval

Is it working..

I'm listening to all clicks on spans on the demo blocks and pushing their details in to this listing, so you can see each plugin working independantly.

Usage

In your javascript, after document ready, you can make use of this function in the standard way:

jQuery(".selector").timedEventSequence(configurationOptions);

Configuration options

These are the things you can actually change and what they do:

interval

Defaults to 3000. An integer representing the desired milliseconds between events.

eventType

Defaults to "click". A string and can be any standard jQuery bindable event.

position

Defaults to 0. An integer representing the starting position in the sequence.

beforeEvent & afterEvent

Defaults to a simple function that returns true (if not returning true it will stop the trigger). Can be set to any function:

beforeEvent: function(allItems, oldItem, newItem, eventType);

afterEvent: function(allItems, oldItem, newItem, eventType);

This is what the params passed in represent:

allItems: This is all of the items matching the selector.

oldItem: This is the item from the selection that was active before the event.

newItem: This is item from the selection that is active after the event.

eventType: This is the type of event ("click" etc), handy if you are using the same function on multiple instances of this plugin.

Example configuration

jQuery(".selector").timedEventSequence({
    interval:2500,
    eventType: "click",
    beforeEvent: function(allItems, oldItem, newItem, eventType){
      oldItem.removeClass("active");
      return true;
    };
    afterEvent: function(allItems, oldItem, newItem, eventType){
      newItem.removeClass("active");
      return true;
    };
});

Changing configuration values

Once an instance has been created you can still make changes to it (see example 6) in a standard way.

If you want to change one of the configurable options you simple recall the plugin on the same collection:

  jQuery(".selector").timedEventSequence("option", "interval", 6000);

That would change the interval to 6 seconds. You can rebind any option from the initial configuration call.

Stop, start, reset etc

The plugin comes with some handy extra functionality that you can trigger in this format:

jQuery(".selector").timedEventSequence(function_name);

The available functions are:

start: starts the internal timed event trigger.

stop: stops the timed event by clearing the interval timer.

restart: runs stop and then start.

reset: sets the position to 0, then runs stop and start.

Rebinding after DOM changes

If the DOM has been updated and you need to update the items within the collection this is currently a manual process in a similar style as the previous functions; here is an example:

  var items = jQuery(".selector").timedEventSequence();
  //.... other code goes here
  // a new .auto-trigger item is added to the DOM
  //.... in a dom listener or function called when successfully added to the dom (ajax success etc)
  var new_items = jQuery(".selector");
  items.timedEventSequence("rebind", new_items);

Notes & files

I will look at getting a configuration option set to automatically update the collection being used when the DOM is changed.

Plugin Example 1 js Example 2 js Example 3 js Example 4 js Example 5 js Example 6 js Event reporting js