CODEWITHSUNDEEP
jquerymobiletouch
EZDC
EZDC

Reputation: 682

Mobile device - No touch event triggered for x amount of time

I am working on a mobile site where I need to have a slideshow appear if there have been no touch events for say 10 seconds. I have tried a number of things but haven't quite gotten it.

This is the code I have so far:

window.setTimeout(function(){
    $('#slideshow').show();
    $('#slideshow').animate({
        opacity:1   
    }, 800);
}, 3000);

$('#slideshow').click(function(){
    //alert('helo');
    $('#slideshow').animate({
        opacity:0   
    }, 800, function(){
        $('#slideshow').hide();
    });

});

This works but I need to trigger the show and opacity animation after so many seconds of inactivity. Anyone ever done this and have a quick solution. Thanks

Updated Code:

    var waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);

    var activity = $(window).click();

    $(document).on('activity', function() { 
        clearTimeout(waiting); 
            waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);
    });

    $('#slideshow').click(function(){
        $('#slideshow').animate({
            opacity:0   
        }, 800, function(){
            $('#slideshow').hide();
        });

    });

This isn't quite working yet... Initially it does work. The slideshow does wait 3 seconds to appear and continually gets reset if there is any activity but one the slideshow has appeared and then been removed it doesn't reappear...?

Any ideas Thanks

Upvotes: 1

Views: 151

Answers (1)

Brad M
Brad M

Reputation: 7898

Define "activity" and whenever "activity" is triggered, have it clear the setTimeout, then initiate it again.

var waiting = window.setTimeout(function(){ });
$(document).on('activity', (function() { 
    clearTimeout(waiting); 
    waiting = window.setTimeout(function(){ });
});

Upvotes: 2

Related Questions