Question

I wrote a small scroller in jquery. The scroller seems to work perfectly on PC and Macs. However it doesn’t work on touch devices.

I guess this is due to mousedown property being called. how do I make this work on both PC and touch screen devices?

Thanks

$('.scroll-nav-up, .scroll-nav-down').live('click', function(){
    $('.scroller-wrap').stop();
    return false;
});


$('.scroll-nav-up').live('mousedown', function(){

    $(this).closest('.item').find('.scroller-wrap').animate({
        top: -($(this).closest('.item').find('.scroller-wrap').height() - 250)
    }, 800);

});


$('.scroll-nav-down').live('mousedown', function(){

    $(this).closest('.item').find('.scroller-wrap').animate({
        top: 0
    }, 800);

});

Answer 1

Nothing special found, so at this moment I am using 2 scripts. The first script identifies the the touch screen devices as written by Alastair Campbell on Detecting touch-based browsing.

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;');
   if(typeof el.ongesturestart == "function"){
      return true;
   }else {
      return false
   }
}

and then use the mousedown event for regular browsers and use tap event for touch screen devices.

P.S – Using both jQuery and jQuery Mobile