1

I have an issue with a 'Latest News' module. Please have a look at http://www.proudfootsupermarkets.com/ to see an example of the module (it's the div close to the top of the page which has a large image in it).

At the moment I have it set up so that when a user clicks on a tab the main article shows. The jQuery for this is:

    jQuery(document).ready(function() {

    $(".moduletable.latestnews article:first-child").addClass("atfront")

    $(".moduletable.latestnews article").click(function(){
        $(".moduletable.latestnews article").css("zIndex",1).addClass("atback").removeClass("atfront");
        $(this).css("zIndex",100).addClass("atfront").removeClass("atback");
    });
});

This is all quite simple and straight forward. The problem that I am having is that I want the articles to change automatically after a few seconds. This would then go in an infinite loop starting with article 1 and then after a couple of seconds showing article 2 etc etc...

I am sure that this is fairly simple but I have just about exhausted my knowledge of JavaScript. Thank you for any help that you are able to give :)

I have created a jsfiddle http://jsfiddle.net/Bempv/

user1817708
  • 45
  • 1
  • 1
  • 6
  • 1
    you could use setInterval and/or setTimeout based on how you want to show/hide your elements – Ravi Y Nov 12 '12 at 10:24

1 Answers1

2

You can use setTimeout to change the article in front. If you select the article with the class ".atfront" and then use the .next() selector you should get the functionality you are looking for

$(function(){
    var articleToggler = function articleToggler(){
    var front = "atfront",
        back = "atback";
    return function(){
       var selection = $(".moduletable.latestnews")
                          .find("article.atfront")
                          .addClass(back)
                          .removeClass(front);
           next = selection.next("article"); 
           next = next.length ? next : $(".moduletable.latestnews")
                                   .find("article").first();
           next.addClass(front)
               .removeClass(back);
           console.log(selection.length,next[0])  


       setTimeout(articleToggler(),1000); //changes every second
    };
};

//start the rotation
(articleToggler())();
});

The setTimeout will call the function passed as the first argument once the timeout expires. The timeout argument is in miliseconds so the above code wait for 1 second before calling the function. Since the above function adds it self as the callback this will repeat indefinately

Rune FS
  • 21,497
  • 7
  • 62
  • 96
  • The line .find(":nth-child(" + i +")") creates a syntax error in DreamWeaver with the result being that it doesn't work, not sure why. – user1817708 Nov 12 '12 at 11:03
  • because I had inserted a ; too much on the preceeding line – Rune FS Nov 12 '12 at 11:19
  • Thank you for your help on this, I am using your updated code but I am getting an error on line .removeClass(back); – user1817708 Nov 12 '12 at 11:31
  • @user1817708 I was updating the code so didn't see your comment. Do you have the same issue with the current code? – Rune FS Nov 12 '12 at 11:40
  • Hi, I am now using your updated code and I am still having an error on .removeClass(back); – user1817708 Nov 12 '12 at 11:42
  • No errors in current code but the toggler doesn't automatically work jsfiddle http://jsfiddle.net/Bempv/3/ – user1817708 Nov 12 '12 at 11:47
  • @user1817708 the fiddle you linked to was not the latest code. I have no problem with the code i njsfiddle – Rune FS Nov 12 '12 at 11:49
  • http://jsfiddle.net/Bempv/8/ is latest but I have changed var selection = $(".moduletable .latestnews"), to var selection = $(".moduletable.latestnews article"), – user1817708 Nov 12 '12 at 11:54
  • @user1817708 I've tested the current version in fiddle and as far as I can tell it works (though you do need to add at least the atfront class to one of the articles – Rune FS Nov 12 '12 at 12:16
  • 1
    Thank you so much!!! Got it working at http://www.proudfootsupermarkets.com with your fabulous code. Thank you again. – user1817708 Nov 12 '12 at 12:23