Jquery run click function every x seconds

Question

I have the following jQuery

<script type="text/javascript">
        jQuery(function(){              
            jQuery('.link1').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle1').show();
                jQuery('#arrow').css({top: '0px'});
            });

            jQuery('.link2').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle2').show();
                jQuery('#arrow').css({top: '42px'});
            });

            jQuery('.link3').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle3').show();
                jQuery('#arrow').css({top: '84px'});
            });

            jQuery('.link4').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle4').show();
                jQuery('#arrow').css({top: '125px'});
            });

            jQuery('.link5').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle5').show();
                jQuery('#arrow').css({top: '166px'});
            });

            jQuery('.link6').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle6').show();
                jQuery('#arrow').css({top: '207px'});
            });
        });


        jQuery(function(){
            jQuery("#toggle-links ul > li > a").click(function(e){
                e.preventDefault();
            jQuery("#toggle-links ul > li > a").addClass("selected").not(this).removeClass("selected");
            });
        });
    </script>

And need to add a function which will run the click functions in order link1, link2, link3... every 3 seconds until it gets to link6 then it will loop back to link1 and if a user was to hover over a div with the id #holder the function would stop running until mouseout. I am a bit stumped over as to do this, any ideas?

Check this one out: developer.mozilla.org/en/window.setInterval — Madara's Ghost
– Madara's Ghost, Commented Aug 23, 2011 at 16:11

Sarfraz · Accepted Answer · 2011-08-23 16:57:28Z

15

Try:

var interval = null;

jQuery(function(){
  interval = setInterval(callFunc, 3000);
});

function callFunc(){
  jQuery('.link1, .link2, .link3').trigger('click');
}

Any time you can stop auto clicks by calling:

clearInterval(interval);

To call them in order, you can modify your code like this:

        jQuery('.link1').click(function(){
            jQuery('.hide-div').hide();
            jQuery('.toggle1').show();
            jQuery('#arrow').css({top: '0px'});

            // click link2
            jQuery('.link2').trigger('click');
        });

        jQuery('.link2').click(function(){
            jQuery('.hide-div').hide();
            jQuery('.toggle2').show();
            jQuery('#arrow').css({top: '42px'});

            // click link3
            jQuery('.link3').trigger('click');
        });

edited Aug 23, 2011 at 16:57

answered Aug 23, 2011 at 16:12

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user113716 Over a year ago

That won't trigger them in order on an interval. They'll all be triggered every 3 seconds.

dciso · Accepted Answer · 2011-08-23 16:24:09Z

0

This might help:

<script type="text/javascript">

    var countClicks = 0;

    function runClicks(){   

        if (countClicks >= 6)   
            countClicks = 0;

        countClick++; 

        jQuery('.link' + countClicks.toString()).click(function(){
            jQuery('.hide-div').hide();
            jQuery('.toggle' + countClicks.toString()).show();
            jQuery('#arrow').css({top: '0px'});
        });
    }

    jQuery(function(){  
        setInterval("runClicks()", 3000);

        jQuery('#holder').hover( function() {
               clearInterval("runClicks()", 3000);
        });

        jQuery('#holder').mouseout( function() {
               setInterval("runClicks()", 3000);
        })
    });


</script>

edited Aug 23, 2011 at 16:24

answered Aug 23, 2011 at 16:18

dciso

1,2643 gold badges18 silver badges31 bronze badges

Comments

Joe Landsman · Accepted Answer · 2011-08-23 17:41:19Z

I think your best bet here is to refactor the code to make things more programmatic and easier to implement then use a jQuery plugin for the timing stuff. Below is a demo I whipped up quick using the jQuery Timers Plugin. You'll likely have to modify it a bit to suit your needs but I think it's roughly what you're looking for.

HTML

<div id="links">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
</div>

<div class="toggle">toggle 1</div>
<div class="toggle">toggle 2</div>
<div class="toggle">toggle 3</div>
<div class="toggle">toggle 4</div>
<div class="toggle">toggle 5</div>
<div class="toggle">toggle 6</div>

<div id="arrow">Arrow</div>

<div id="holder">Pause Box</div>

Javascript

<script type="text/javascript">
$(document).ready(function() {
    links = $('#links a');          // Get all the toggling links
    boxes = $('div.toggle');        // Get all toggle boxes
    var myTimer = $.timer();        // Instantiate a timer

    // Bind our processing function to the links
    links.click(runProcess);

    // Setup timer  
    myTimer.set({
            action : function() {
                var selectedIndex = (links.filter('.selected').index() + 1) % links.length;
                links.eq( selectedIndex ).trigger('click');
            },
            time : 3000
    }).play();

    // Bind pause/play to #holder and links so that timer does not run when user hovers
    // over holder box or links area
    $('#holder, #links').hover( function(){ myTimer.pause(); }, function() { myTimer.play(); });
});

// Do stuff when a link is clicked or triggered
function runProcess(e)
{
    var arrowTopPositions = new Array('0', '42px', '84px', '125px', '166px', '207px');  // Create array of 'top' positions for #arrow
    var index = $(this).index();    // Get index of this link
    var arrow = $('#arrow');        // Get #arrow element

    $(this).addClass("selected").siblings().removeClass("selected");    // Add class to the selected link and remove class from siblings
    boxes.eq( index ).show();                                           // Show toggle box that has same ordinal index as this link
    arrow.css('top', arrowTopPositions[ index ]);                       // Position arrow using position array and index of this link
    e.preventDefault();                                                 // ya know, prevent default behavior of link
}
</script>

Collectives™ on Stack Overflow

Jquery run click function every x seconds

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related