0

I'm working on a project at the moment that involves a slider in an info popup. The slide constains info only needed on a touch device. On a desktop it only needs to show the first slide. So what I need to do is stop the slider when on a desktop... I've got pretty close with:

$('body').on({ 'touchstart' : function(){           
} });

But as I'm only just starting in jquery I'm 'hacking' it and what I'm doing creates 'unstable' results. I know I need to only process the slider code if being viewed on a touch device - but I have no idea where I should do this...

This is the slider code:

var triggers = $('div.triggers div.trigger');
var images = $('div.slides div.slide');
var lastElem = triggers.length-1;
var mask = $('.mask div.slides');
var imgWidth = images.width();
var target;

triggers.first().addClass('selected');
mask.css('width', imgWidth*(lastElem+1) +'px');


function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function() {
    if ( !$(this).hasClass('selected') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.clickSlide.right').click(function() {
    target = $('div.triggers div.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.clickSlide.left').click(function() {
    target = $('div.triggers div.selected').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('div.triggers div.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

All help greatly received!!!! Thanks :0)

AaronVonF
  • 15
  • 5
  • What's unstable? Can you provide a live example? Which parts in particular are you having trouble with? – Zach Saucier Oct 31 '13 at 12:31
  • @Zeaklous When I try to put the 'touchstart' into the beginning of the code it stops the slider running on Desktop bur screws up the timing of the slider on touch devices... – AaronVonF Oct 31 '13 at 14:42
  • @Zeaklous - when I wrap the whole thing with $('body').on({ 'touchstart' : function(){ - then the slider code... – AaronVonF Oct 31 '13 at 14:42
  • The function is not run on browsers when you include the `.on` because it doesn't have a `touchstart` event. I would run it on `load` and have a section specifically for touch screens if it has that ability. You can find it out [this way](http://stackoverflow.com/questions/6262584/how-to-determine-if-the-client-is-a-touch-device) – Zach Saucier Oct 31 '13 at 15:26
  • @Zeaklous Thanks Zeaklous. I'm not sure you're getting what I'm after though - I want to STOP the slider from running if being viewed on a desktop browser. I just need to know where to put the .on touchstart code so that the slider code runs when being viewed on an ipad etc. Thanks!! – AaronVonF Oct 31 '13 at 18:53
  • @Zeaklous - so just to clarify - something like - " on touchstart - run slider code - if not a touch device - don't run slider code. – AaronVonF Oct 31 '13 at 19:01
  • Ah, I see now. If you could provide a live example (perhaps on jsFiddle) then it would be easier for us to help you – Zach Saucier Nov 01 '13 at 01:02

0 Answers0