Question

I am using the anything slider jquery plugin with the touch events.
it appears to be working as expected on all devices allowing users to ‘swipe’ by touch on tablets and ios devices and by using the mouse on a desktop.

$('#slider').anythingSlider({   
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {

var time = 1000, // allow movement if < 1000 ms (1 sec)
        range = 50,  // swipe movement of 50 pixels triggers the slider
        x = 0, t = 0, touch = "ontouchend" in document,
        st = (touch) ? 'touchstart' : 'mousedown',
        mv = (touch) ? 'touchmove' : 'mousemove',
        en = (touch) ? 'touchend' : 'mouseup';

    slider.$window
        .bind(st, function(e){
            // prevent image drag (Firefox)
            e.preventDefault();
            t = (new Date()).getTime();
            x = e.originalEvent.touches ? 
                e.originalEvent.touches[0].pageX : e.pageX;
        })
        .bind(en, function(e){
            t = 0; x = 0;
        })
        .bind(mv, function(e){
            e.preventDefault();
var newx = e.originalEvent.touches ? 
           e.originalEvent.touches[0].pageX : e.pageX,
            r = (x === 0) ? 0 : Math.abs(newx - x),
            // allow if movement < 1 sec
            ct = (new Date()).getTime();
            if (t !== 0 && ct - t < time && r > range) {
                if (newx < x) { slider.goForward(); }
                if (newx > x) { slider.goBack(); }
                t = 0; x = 0;
            }
        });

however my sliders, which contain both images and text that are links, can not be ‘selected’ (link activated) by tablets and ios devices, the text maintains the hover css styling, but touching does nothing.

clicking via a mouse on a desktop still works and users can click through to articles.

any idea on how to make this work on all devices?

i.e. i need to be able to slide and also select the links in the slider.

i think my options are:
1. limit the swipe effect to the images, leaving the text box clickable
2. add to the jquery option that if there is zero movement activate the link
3. change the z-index of the text to be above the ‘swipe overlay’ div

i have no idea how to code options 1 or 2. advice please?

item 3 i will try in the mean time.

Answer 1

You’re touchstart event listener is doing calling preventDefault() which prevents the event from bubbling up to the click event. If you remove it, but keep it in the move and end events it should work.