JavaScript – kane.codes

Sequencr jQuery Plugin

This jQuery plugin is great for when you want to animate a set of elements in succession, that is, not all at the same time.

~~Sorry, but my maths isn’t great and I’m not sure what term to use instead of modifier for overlapping the animations. If anyone knows, please comment and I’ll sort it out.~~

Thank you to Alan Neville on Twitter, apparently the term I should be using instead of modifier is convolution. I will update the code accordingly!

Click here to jump straight to the minified plugin code.

Animations:

There are no default animations set, you must pass an object literal of animations and their values to the animations property.

$('.elements').sequencr({
    animations:{
        opacity:0
    }
});

$('.elements').sequencr({

animations:{

opacity:0

}

});

Animation Time:

Pretty self explanatory, changing the animationTime property will change how long each animation will take, in milliseconds. The default is 1000 milliseconds (1 second).

Classes:

You can choose to have classes added to each element after the animation has finished by adding a string to the classes property.

$('.elements').sequencr({
    classes:"addThisClass addThisClassToo"
});

$('.elements').sequencr({

classes:"addThisClass addThisClassToo"

});

Delay:

The delay before any animations start, in milliseconds. Changed with the delay property. The default is 0.

Easing:

The type of easing you want to use, the default is “swing”. Can be used with easing plugins wherever you’d use easing in a standard jQuery animation.

$('.elements').sequencr({
    delay:"easeInOutBounce"
});

$('.elements').sequencr({

delay:"easeInOutBounce"

});

Convolution:

Previously called the modifier.

The default setting is to have each element animate once the previous element has finished, but you can change the convolution value, with 1 being default. Setting convolution:2 will cause the next animation to start when the previous animation is halfway complete, but you can choose any number. The higher the number, the sooner the next animation will start. Choosing convolution:0 will cause the animations to all fire at the same time.

Time Between:

You can set the time between animations by changing the timeBetween property. The default for this is 100, and the value you pass will be in milliseconds.

Example:

$('#animate span').sequencr({ //Target the span elements inside the #animate element
	animations : { //Choose which animations to carry out
		opacity : 0, //Fade out each span element
		top : 20 //Also make them "drop" 20 pixels, span must have CSS style "position:relative" to do this
	},
	animationTime : 500, //Run the animation for half a second
	classes : "finished", //Add the "finished" class to each element after its animation
	timeBetween : 0 //We don't want a gap between the animations
});

$('#animate span').sequencr({ //Target the span elements inside the #animate element

animations : { //Choose which animations to carry out

opacity : 0, //Fade out each span element

top : 20 //Also make them "drop" 20 pixels, span must have CSS style "position:relative" to do this

animationTime : 500, //Run the animation for half a second

classes : "finished", //Add the "finished" class to each element after its animation

timeBetween : 0 //We don't want a gap between the animations

});

Plugin code:

Add this to your jQuery/JS file before any code that uses the plugin:

;(function(jQuery){jQuery.fn.sequencr=function(o,cb){var t=typeof o.timeBetween=='undefined'?100:o.timeBetween;var at=typeof o.animationTime=='undefined'?1000:o.animationTime;var an=typeof o.animations=='undefined'?{n:0}:o.animations;var d=typeof o.delay=='undefined'?0:o.delay;var e=typeof o.easing=='undefined'?"swing":o.easing;var c=typeof o.convolution=='undefined'?1:o.convolution;var cl=typeof o.classes=='undefined'?"":o.classes;this.delay(d);var am=this.size();var r=am*(at+t);var a=0,b=0;return this.each(function(){jQuery(this).delay(a++*(at+t)/c);r-=(at+t);jQuery(this).animate(an,at,e,function(){b++;if(typeof cb!="undefined"&&b==am)cb();$(this).addClass(cl);});jQuery(this).delay(r+t);});};})(jQuery);

;(function(jQuery){jQuery.fn.sequencr=function(o,cb){var t=typeof o.timeBetween=='undefined'?100:o.timeBetween;var at=typeof o.animationTime=='undefined'?1000:o.animationTime;var an=typeof o.animations=='undefined'?{n:0}:o.animations;var d=typeof o.delay=='undefined'?0:o.delay;var e=typeof o.easing=='undefined'?"swing":o.easing;var c=typeof o.convolution=='undefined'?1:o.convolution;var cl=typeof o.classes=='undefined'?"":o.classes;this.delay(d);var am=this.size();var r=am*(at+t);var a=0,b=0;return this.each(function(){jQuery(this).delay(a++*(at+t)/c);r-=(at+t);jQuery(this).animate(an,at,e,function(){b++;if(typeof cb!="undefined"&&b==am)cb();$(this).addClass(cl);});jQuery(this).delay(r+t);});};})(jQuery);

Avoid Logs To The Console Breaking In IE7 & 8

As I’m sure you’re aware, if you try to log to the console in a browser like IE7 or 8 where there is no console like this:

console.log("Hello World!");

1	console.log("Hello World!");

Then it will break your script. Of course, the simple solution to this is to make sure there’s no call to the console object in your code, however during testing this can be quite tedious. At the expense of a few lines of code you can get around this by adding this at the top of your JS file:

var c = {
	log : function(a) {
		if (typeof window.console != "undefined") console.log(a);
	}
};

var c = {

log : function(a) {

if (typeof window.console != "undefined") console.log(a);

}

};

Firstly we create a new object called c, and then add a method called log which first checks if the console exists, and then calls the regular console.log() method if it does.

You would use this the same as the console, except it’s a bit quicker to write:

c.log("Hello World!");

1	c.log("Hello World!");

Now if you accidentally, or purposefully, leave that in your code it won’t break IE7 or 8, or any other browser which doesn’t implement the console object. You could of course add other console methods quite easily.

Because I’m lovely, here’s an already minified version of the c object, so it takes up even less space.

var c={log:function(a){if(typeof window.console!="undefined")console.log(a);}};

1	var c={log:function(a){if(typeof window.console!="undefined")console.log(a);}};

Go forth and log to the console as much as you wish.

Object Literal Delegates

Furthering on from my introduction tutorial to object literals in JavaScript, this is a slightly more advanced tutorial on how to set up delegates. A delegate is essentially a callback that one object can register for, usually receiving data from the object doing the delegating.

In this tutorial, you’ll learn how to:

Set up a method to add an infinite number of delegates
Set up a method to remove a delegate
Send messages to the delegates

Here’s a working example:

var Map = {
	//Empty array as the delegate property's value that will hold
	//references to any delegates
	delegates: [],
	//The method that will add delegates to the array
	addDelegate: function(delegate) {
		//Push the new delegate onto the array
		this.delegates.push(delegate);
		return this;	
	},
	removeDelegate: function(delegate) {
		//Find the index of the delegate in the array
		var index = this.delegates.indexOf(delegate);
		//Using that index, remove the delegate from the array
		this.delegates.splice(index, 1);
		return this;
	},
	sendDataToDelegates: function() {
		//We'll use some dummy coordinates here just as an example
		//This method is a required method that each delegate
		//must implement or the script will crash
		var coordinates = [37.33182,-122.03118];
		for (var i = 0; i < this.delegates.length; i++) {
			this.delegates[i].coordinatesChanged(coordinates);
		}
		return this;
	}
};

var MapDelegate = {
	//Each delegate is required to have the .coordinatesChanged() method
	coordinatesChanged : function(coordinates) {
		console.log("New Coordinates Received:"+ coordinates[0]+","+coordinates[1]);
	}
};
var AnotherDelegate = {
	coordinatesChanged : function(coordinates) {
		//The actual implementation of the method can be whatever you need for each delegate,
		//as long as the method exists you can do what you like with the data.
		alert("New Coordinates Received:"+ coordinates[0]+","+coordinates[1]);
	}
};
//Add both delegates and then tell the Map object to send the new data
Map.addDelegate(MapDelegate).addDelegate(AnotherDelegate).sendDataToDelegates();

var Map = {

//Empty array as the delegate property's value that will hold

//references to any delegates

delegates: [],

//The method that will add delegates to the array

addDelegate: function(delegate) {

//Push the new delegate onto the array

this.delegates.push(delegate);

return this;

removeDelegate: function(delegate) {

//Find the index of the delegate in the array

var index = this.delegates.indexOf(delegate);

//Using that index, remove the delegate from the array

this.delegates.splice(index, 1);

return this;

sendDataToDelegates: function() {

//We'll use some dummy coordinates here just as an example

//This method is a required method that each delegate

//must implement or the script will crash

var coordinates = [37.33182,-122.03118];

for (var i = 0; i < this.delegates.length; i++) {

this.delegates[i].coordinatesChanged(coordinates);

}

return this;

}

};

var MapDelegate = {

//Each delegate is required to have the .coordinatesChanged() method

coordinatesChanged : function(coordinates) {

console.log("New Coordinates Received:"+ coordinates[0]+","+coordinates[1]);

}

};

var AnotherDelegate = {

coordinatesChanged : function(coordinates) {

//The actual implementation of the method can be whatever you need for each delegate,

//as long as the method exists you can do what you like with the data.

alert("New Coordinates Received:"+ coordinates[0]+","+coordinates[1]);

}

};

//Add both delegates and then tell the Map object to send the new data

Map.addDelegate(MapDelegate).addDelegate(AnotherDelegate).sendDataToDelegates();

If the setup of the objects themselves is confusing then make sure you’ve read my introduction tutorial, but here’s a rundown of what I’ve done:

There are three objects here, the Map object and two other objects which will be a Map delegate. The Map object has a property called delegates, which will hold an array of all the delegates you add. The Map object also has three methods: .addDelegate(), .removeDelegate() and .sendDataToDelegates(). These are all pretty self-explanatory.

The two delegate objects, MapDelegate and AnotherDelegate both have to implement .coordinatesChanged() which is a required method because otherwise the script will break when Map tries to call it. You can make a method optional by first checking if it’s defined before calling it for each delegate.

As you can see, the delegate objects both implement the .coordinatesChanged() method, but they do different things with the data (one prints the coordinates to the console, the other alerts the user with a dialog). All they care about is that the coordinates have changed and what the new coordinates are, they do their own thing with the new data.

Object Literals; Something Every New JavaScript Dev Needs To Know

JavaScript is a funny thing, it’s extremely powerful in helping us make amazing and interactive websites (especially coupled with the fantastic jQuery library), but it’s really difficult to keep the code tidy and structured. Enter ‘Object Literals’.

Object literals are essentially a list of key:value pairs. Each key can hold anything as a value, even another object.

{
	age: 27
}

{

age: 27

}

{
	age: 27,
	name: "Kane Cheshire"
}

{

age: 27,

name: "Kane Cheshire"

}

Here’s an example of passing another object literal as a value to the born key.

{
	age: 27,
	name: "Kane Cheshire",
	born: {
		month: "March",
		year: 1987
	}
}

{

age: 27,

name: "Kane Cheshire",

born: {

month: "March",

year: 1987

}

Note that the last key:value pair in an object doesn’t have a comma after, if you add a comma it will break the script in some browsers (namely IE).

So you’ve learned about the basics of an object literal, but you need to know how they’re actually useful. You can assign an object literal to a variable: Continue reading “Object Literals; Something Every New JavaScript Dev Needs To Know”