I’m working on a mobile web site and one of the things that can be done to make it more usable is to make targets larger, so that user’s don’t have to be as accurate to trigger an event. It is an application of Fitt’s Law. In this case, I was trying to make the target for a link (a html tag) as large as possible and came up with the following plugin. It will look within an element, and if it finds an a tag, it will make the whole element click to go to the destination found. It will also apply a class to the element when users click on it, so that you can visually indicate its been triggered.
Usage
{syntaxhighlighter brush:jscript}
$(‘.big-list’).linkifyContainer({‘hover_class’ : ‘item-hover’});
Source
{syntaxhighlighter brush:jscript}
/**
* Linkify’s a containing div with the first link it finds.
*/
(function( $ ) {
$.fn.linkifyContainer = function(options) {
var settings = {
‘hover_class’ : ‘link-hover’
}
return this.each(function() {
if (options) {
$.extend(settings, options);
}
if ($(‘a:first’, this).length > 0) {
$(this).click(function() {
window.location = $(‘a:first’, this).attr(‘href’);
}).mousedown(function() {
$(this).addClass(settings.hover_class);
}).mouseup(function() {
$(this).removeClass(settings.hover_class);
})
}
});
}
})( jQuery );