In the last post we saw how we could easily work with mouse events on an iPad. Touchscreen devices like the iPad do not have a cursor, so the user cannot exactly move the mouse over an HTML element triggering a ‘mouseover’ event. One of the readers requested on how we could use a different interaction pattern on an iPad for a ‘mouseover’ event than on a desktop browser. For example in the following web page code the image-container
class is attached to images div which displays a preview link overlay on mouseover
.
$('.image-container').live('mouseover', function(){
$(this).children('div').attr('class', 'image-info-active');
});
Obviously this will not work exactly on an iPad like it would on a desktop browser. The overlay will be displayed on a single tap, but will not disappear till we tap another clickable element. One different interaction pattern for the above example is to trigger the overlay on a touchstart
event and remove the overlay after some delay. The first step however is to detect if the site is being viewed on an iPad using the browser user-agent string.
var isiPad = navigator.userAgent.match(/iPad/i) != null;
Later we can run the appropriate code depending the viewing device.
if(isiPad)
{
$('.image-container').live('touchstart', function(){
$(this).children('div').delay(100).fadeIn();
$(this).children('div').attr('class', 'image-info-active');
$(this).children('div').delay(2000).fadeOut();
});
}
else
{
$('.image-container').live('mouseover', function(){
$(this).children('div').attr('class', 'image-info-active');
});
}
Now on an iPad the above code will ‘fadeIn’ the preview overlay once the image is touched and then ‘fadeOut’ after a delay. Of course you could try some different interaction pattern to make better use of the touch capabilities of a tablet.