Question

I am toggling each 4 divs for 10 seconds using this jQuery function based on a href id value.

The timer works fine and it changes 4 divs for every 10 seconds but when user clicks a particular div it doesn’t navigate to particular div and stays there for a given period(ex 10 sec) and proceeds to next div from current div instead of that it goes to div based on timer value.

Can anyone help me regarding this?

$(function() {
    $("a.menu").click(function() {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
});

$(function() {
    var counter = 0,
        divs = $('#cat1, #cat2, #cat3,#cat4');

    function showDiv() {
        divs.hide() // hide all divs
        .filter(function(index) {
            return index == counter % 4;
        }) // figure out correct div to show
        .show('fast'); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    setInterval(function() {
        showDiv(); // show next div
    }, 15 * 1000); // do this every 10 seconds    
});​

Answer 1

I assumed the exact mark-up from the fragments posted in the comments.

First I think you should re-set your counter after each full cycle otherwise it will grow, grow, grow and eventual could cause an exception, maybe not within the first 2-3 days but eventually. There is no need to have the counter variable go beyond divs.length.

Aside that the only thing really missing from your code was the setting of the counter value inside your click event:

$("a.menu").click(function() {
    $("div.featuredposts_content").hide();
    var $divToShow = $($(this).attr('href'));
    $divToShow.show();
    
    // save the index of the new div +1 to ensure it moves on to the div thereafter
    counter = divs.index($divToShow) + 1; 
    
    return false;
});

DEMO – Timer continues from selected div

(I shortened the timer in the DEMO for demonstration purpose you should off course re-set it to your original value)

I used the following assumed HTML:

<a href="#cat1" class="menu">cat1</a>
<a href="#cat2" class="menu">cat2</a>
<a href="#cat3" class="menu">cat3</a>
<a href="#cat4" class="menu">cat4</a>
<div id="cat1" class="featuredposts_content">Category1</div>
<div id="cat2" class="featuredposts_content">Category2</div>
<div id="cat3" class="featuredposts_content">Category3</div>
<div id="cat4" class="featuredposts_content">Category4</div>

​
This is the complete script:

$(function() {
    var counter = 0;
    var divs = $('#cat1, #cat2, #cat3, #cat4');

    function showDiv() {
        divs.hide() // hide all divs
        .filter(function(index) {
            return index == counter % divs.length;
        }) // figure out correct div to show
        .show('fast'); // and show it
        if(counter == divs.length){
            counter = 1;
        } else {
            counter++
        }
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    setInterval(function() {
        showDiv(); // show next div
    }, 2000); // do this every 10 seconds    
    
    $("a.menu").click(function() {
        $("div.featuredposts_content").hide();
        var $divToShow = $($(this).attr('href'));
        $divToShow.show();
        
        counter = divs.index($divToShow) + 1;
        
        return false;
    });
});