Multi-Touch Test (Touch devices only)

var canvas;
var ctx;
var w = 0;
var h = 0;

var timer;
var updateStarted = false;
var touches = [];


function update() {
	if (updateStarted) return;
	updateStarted = true;
	var nw = window.innerWidth - window.innerWidth*.2;
	var nh = 500;

	if ((w != nw) || (h != nh)) {
		w = nw;
		h = nh;
		canvas.style.width = w+'px';
		canvas.style.height = h+'px';
		canvas.width = w;
		canvas.height = h;
	}

	ctx.clearRect(0, 0, w, h);
	var i, len = touches.length;
	for (i=0; i<len; i++) {
		var touch = touches[i];
    var px = touch.pageX - canvas.offsetLeft;
    var py = touch.pageY - canvas.offsetTop;

		ctx.beginPath();
		ctx.arc(px, py, 20, 0, 2*Math.PI, true);

		ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
		ctx.fill();

		ctx.lineWidth = 2.0;
		ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
		ctx.stroke();
    console.log('drawn circle at ' + px +',' + py);
	}

	updateStarted = false;
}

function ol() {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	timer = setInterval(update, 15);

	canvas.addEventListener('touchend', function() {
		ctx.clearRect(0, 0, w, h);
	});

	canvas.addEventListener('touchmove', function(event) {
	  event.preventDefault();
	  touches = event.touches;
	});
};

Simple Slideshow

var slideshow = new Dragdealer('slideshow',
{
	steps: 4,
	loose: true,
	animationCallback: function(x, y)
	{
		var top = x * (menuWrapper.offsetHeight - cursor.offsetHeight);
		cursor.style.top = String(top) + 'px';
	}
});

link1.onclick = function()
{
	slideshow.setStep(1);
	return false;
}
link2.onclick = function()
{
	slideshow.setStep(2);
	return false;
}
link3.onclick = function()
{
	slideshow.setStep(3);
	return false;
}
link4.onclick = function()
{
	slideshow.setStep(4);
	return false;
}