Attempts at writing a ticker

first steps in DOM scripting

[Robin_reala]

I'm currently trying to get my head around DOM scripting by writing a ticker. At the moment I'm keeping it pretty simple.

1) Set up an array of headlines and another array of the corresponding links.

2) For each headline and link create a new <li> node, a new <a> node, set the @href of the <a> to that link, and set the text node of the <a> to the headline. Append back onto the main list container.

3) Set all the list items to display:none;

4) Take the first item and set to display:list-item; for 3 seconds. Then set to display:none;

5) Repeat 4. If the end of the list is reached reset the counter and start from the beginning.

Here's the code I've come up with so far. It works but doesn't repeat at the end - that's what I'm trying to tackle at the moment.

 var news_headlines = new Array("Sample news headline", "Another headline", "A Third headline");
 var news_urls = new Array("http://somelink/", "http://someotherlink/", "http://thirdlink/");
 var newsitems;
 function tick() {
  var ticker = document.getElementById('ticker');
  var news = ticker.getElementsByTagName('ul')[0];
  news.removeChild(news.getElementsByTagName('li')[0]);
  newsitems = news.getElementsByTagName('li');
  /* create the items */
  for (i = 0; i < news_headlines.length; i++ ) {
   var itemnode = document.createElement('a');
   itemnode.appendChild(document.createTextNode(news_headlines[i]));
   itemnode.href = news_urls[i];
   news.appendChild(document.createElement('li')).appendChild(itemnode);
  }
  /* init all the items to display: none; */
  newsitems = news.getElementsByTagName('li');
  for (i = 0; i < newsitems.length; i++ ) {
   newsitems[i].style.display = 'none';
  }
  /* tick the items */
  for (i = 0; i < newsitems.length; i++ ) {
   setTimeout('tick_type(newsitems['+i+']);', (3500*(i+1) - 3500));
   setTimeout('newsitems['+i+'].style.display = \'none\';', 3500*(i+1));
  }
 }
 function tick_type(item) {
  item.style.display = 'list-item';
 }

Now, where I'm getting confused is setTimeout. I understand that it spawns a new thread so you can't use traditional 'pause' methods. I tried using setInterval but obviously I don't want to be using that approach with a for loop and I can't work out for to get it to increment through the array (even using a global counter variable).

Any help gratefully appreciated! Comments on coding style would be nice as well. I've not really done much Javascript before - been doing markup and styling for the past couple of years (although I did do a computer science degree so it's not entirely unfamiliar).

[Robin_reala]

OK, scrap this. Just been told the design has been amended to scroll sideways instead, which I think will be easier.

I'd still appreciate any handy tips or comments on coding style of course :)