CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

Simulate next button click with jQuery

Not sure if this is possible but I have a slideshow on my site that when a button is click the relevant slide, slides in.

What I want to do is add a timer so that after 3 seconds the next button is clicked, making my slideshow slide automatically. 

$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-720*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });


});

Ive added a Fiddle... http://jsfiddle.net/5jVtK/

Upvotes: 1

Views: 5184

Answers (3)

Nate
Nate

Reputation: 4958

The simplest way to do this is to use setTimeout (happens once after a delay) or setInterval (happens every so often).

setTimeout( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );

setInterval( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );

Once you get this implemented, you may want to think about some other niceties, such as stopping the automatic progression when the user's mouse is over the next button or over the slideshow (since that implies interest in what is currently displayed) and resuming the autoadvance on mouseout.

Next: it sounds like you need to figure out how to dynamically find the correct button to trigger to keep advancing through multiple slides. This is one way to do it:

`

function click() {
    // Find the button for the next slide in relationship to the currently active button
    var $next = $( '#button' ).find( '.active' ).next( 'a' );

    // If there isn't one, go to the beginning
    if ( ! $next.length ) {
        $next = $( '#button' ).find( 'a' ).first();
    }

    // Trigger the click
    $next.trigger( 'click' );

    setTimeout(click, 3000);
}

setTimeout(click, 3000);

Here's a link to a fiddle showing this in action:

http://jsfiddle.net/5jVtK/1/

Upvotes: 3

Colin Brock
Colin Brock

Reputation: 21575

You can trigger the click event of an element with jQuery by doing

$('#button a').click();

To make this happen at a 3 second interval, use setInterval():

function simulateClick(){
    $('#button a').click();
};

setInterval(simulateClick, 3000);

Upvotes: 3

Heath N
Heath N

Reputation: 563

Something like this should work. This way we are running a function at an interval and the click also triggers the same function. The timer never needs to activate a button, just activate the function that the button also activates.

$(document).ready(function() {
   var timer = setInterval( slideFunction, 5000);

    $('#button a').click(function(){
     slideFunction();
    });
    function slideFunction(){
        var integer = $('#button a').attr('rel');
        $('#myslide .cover').animate({left:-720*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
        });
    }
});

Upvotes: 0

Related Questions