creating a Javascript-based news ticker

Question

I'm creating a ticker of sorts, and need it to be running until the page is obviously closed or navigated away from.

This script will just be cycling through li (this is what I've got so far):

$("li").hide(); //hides all "li" onload
var lis = $("ul").children("li").size(); //counts how many "li"s there are
var count = 0;
while(true)
{
    count++;
    if(count>lis) //checks if count needs to be reset
    count = 1;

    $("li:nth-child(" + count + ")").fadeIn('slow');
    setTimeout('', 4000);
}

Obviously the page won't load because of the the infinite loop. Does anyone have any suggestions about how I should go about this?

score 2 · Accepted Answer · answered Jan 28 '11 at 04:31

2

var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();

setInterval(function() {
    ticker.find(':visible').fadeOut(function() {
        $(this).appendTo(ticker);
        ticker.children(':first').show();
    });
},2000);

demo

answered Jan 28 '11 at 04:31

Reigel Gallarde

64,198
21
121
139

score 0 · Answer 2 · answered Jul 19 '14 at 14:07

0

To add to Reigel's brilliant answer,

var ticker = $('ul.ticker');
ticker.children(':first').show().siblings().hide();

setInterval(function() {
ticker.find(':visible').fadeOut(function() {
    $(this).appendTo(ticker);

    // fadeIn() rather than show() here to create a continuously fading effect.

    ticker.children(':first').fadeIn();
});
},2000);

answered Jul 19 '14 at 14:07

Rami Abdelal

1
1

Welcome to the site. Can you add some text to explain how this adds to Riegel's answer / why it's necessary, etc.? – gung - Reinstate Monica Jul 19 '14 at 14:38
Thanks gung. I commented in the code that using fadeIn() instead of show() means text is always fading in and out making it appear smoother. – Rami Abdelal Jul 19 '14 at 14:52

score 0 · Answer 3 · answered Jan 28 '11 at 04:18

0

You should have your setTimeout point to the function that you want to have fire each time, and have that function also call setTimeout again. It's effectively infinite polling, but with the built-in delay. It also lets you set a flag if you want to break the (i.e. by not calling setTimeout again).

answered Jan 28 '11 at 04:18

Paul

35,689
11
93
122

how should i keep the script running infinitely? because while(true) isnt working – nkcmr Jan 28 '11 at 04:22
Or you could use setInterval to continuously call a 'next element'. – rcravens Jan 28 '11 at 04:22
That's what I'm saying. setTimeout takes a function as its first param. If you have that function do the logic inside your loop (instead of the loop) you just keeep resetting setTimeout forever. setInterval (as rcravens said) is another means, but in most cases I find setTimeout to be more reliable b/c you don't have to worry about whether your code finishes before the function gets called again. – Paul Jan 28 '11 at 04:28

score 0 · Answer 4 · answered Dec 08 '11 at 21:10

There is also something else like a jquery plugin (jQuery webTicker) that does all the work for you. For example you can just do an unsorted list

<ul id='webticker'>
  <li>text</li>
</ul>

use jquery on top of it

jQuery('#webticker').webTicker();

and this will automatically start your rotating script you will also need some additional CSS which is provided along the plugin itself for styling which can be modified. The script includes and automatic stop function when mouse is on top of the webticker whilst you can have fade in and fade out effects as explained in the webticker example on the download website

creating a Javascript-based news ticker

4 Answers4

demo