Touch based event mapping

From a response on StackOverflow

I’ve captured the touch events and then manually fired my own mouse events to match.

Touch to mouse is wrong.
Mouse to touch is good.

Because mouse it’s more simple than touch. How would you simulate multi-touch into mouse events? Sure there is a way but it’s awful and not lightweight. That’s why you should build for touch. Starting from now on.

Sure, there is no problem using touch to mouse plugins on active websites, but using them on new projects it is rather regressive and old.

Reasons why you should use this technique

  • Simulates events only in desktop browsers
  • Native touch events ( because mobile devices have less processing power )
  • You’re creating future-proof code

So the point here is that we shouldn’t make mobile devices behave as a we know( like a mouse ), but make the mouse behave as a finger.

Of course there are inconsistencies like mouseover, mouseout and rightclick which belong to desktop browsers ant can’t be simulated into touch events. And this frustrating bug.

jQuery plugin

I don’t think I’m the only one upset that jQuery doesn’t support touch events yet. Every code can be improved, so please contribute to this project on GitHub to keep it going.

The idea is to detect if the device supports touch events and from there on, to simulate or to use the default apis. Thanks to Modernizr for the touch events detection code.

See the example

( function( $ ){

	$( document ).ready(function(){

		var position = { top: 0, left: 0 }, doc = $( document ), elm = $( '#box' ), startpos = {};

		elm.on( 'touchstart',function( e ){

			// android bug, it will prevent links and buttons from working

			var touch = e.changedTouches[ 0 ];

			position = elm.position();
			startpos.x = position.left - touch.pageX;
			startpos.y = - touch.pageY;

			// add drag functionality
			doc.on( 'touchmove', function( e ){

				var touch = e.changedTouches[ 0 ];
					top: startpos.y + touch.pageY, 
					left: startpos.x + touch.pageX 

			}).on( 'touchend', function( e ){ 'touchmove touchend' );


		}).click( function(e){

			// don't follow the link in desktop browsers


		// multiple bindings
		elm.on( 'touchstart',function(){

			elm.css({background:'green' });

		}).on( 'touchend', function(){

			elm.css({background: 'red'});



})( jQuery );

Source code is very small, 3 kb unminified and 1.3 minified.

Drawing complex gradients on the canvas


While on my way to build this awesome lightbox plugin, I thought a coloured backlight effect would spice up the things. But drawing it was not an easy task.

Canvas complexity

While the canvas element is pretty good at drawing simple gradients it doesn’t provide an easy way to stretch or deform things. Or to blur them. So, drawing a radial gradient and then applying some warping was not easily achievable. Nor blurring of some simple shapes.

Photoshop inspiration

The simplest way I could draw that thing on the canvas was using a transparency mask like Photoshop uses. Masking is also the right way to do it, because a transparent PNG with a background color will overlay a color. Masking changes the alpha channel so it can be shown over anything.


  • Easy to use
  • Only 813 bytes minified
  • Masks anything

Known Flaws:

  • IE lacks canvas support ( only IE 9 and above )
  • Slow drawing times
  • Mask and source images must have the exact same size


var canvas = document.getElementById( 'canvas_id' ), image = new Image();
image.onload = function(){
	var mask = new CanvasMask( canvas, this ), photo = new Image();
	photo.onload = function(){
		mask.context.drawImage( this, 0, 0 );
	photo.src = 'photo.jpg';

image.src = 'mask.jpg';


The mask is applied to the canvas and then the container background is changed. Note that the code doesn’t include the coloring algorithm and creating a mask erases the canvas.

Font Awesome – Javascript get all the glyphs

I was searching the internet for a way to get all the icon characters in FontAwesome and display them in a list. A JSON list seemed like a pretty good solution, but it requires time to maintain. But what if we could render all the characters in the font range and choose the ones that are non-empty?

This is where it became complicated. There was no default way to know if a glyph existed or not and no index of an empty glyph. Browsers like Opera were making this even harder to do since they were overwriting the default font.

After some serious tweaking and testing, Firefox and Safari found all the glyphs, Chrome, Opera and IE( 7 and 8 ) found 247 of the 249 icons in the font. Looked like a pretty good result so why not sharing, in case everyone ever needs this.

To use paste the following code anywhere inside your body tag.

<div id='glypher' style="font-family:FontAwesome;overflow:hidden;width:1px;height:1px;line-height:1em;font-size:1000px">&#xefff;</div>

And include these into the page head along with jQuery and the Font Awesome css file:

<script src='jquery.pubsub.js'></script>
<script src='jquery.fontawesome.js'></script>

And then do something with the list:

$.iconGlyphs( function( list ){
	// Alert the list length
	alert( list.length );

	// or create a new icon
	var icon = document.createElement( 'div' );
	icon.className = 'icon-g';
	icon.innerHTML = String.fromCharCode( list[ 0 ] );

Like i did below:


Grab PubSub from here, download the script and you’re ready to go.