I've added a news ticker to a beta page i'm working on:


I used the scrolling news ticker in The Javascript Anthology (Chap. 14, pg. 298). Very happy with the result, but I'd like to find a way to include more text/links. The html in the example in the book is just plain text inside the scrolling div (except for a <strong></strong>):

<div id="newsTicker">
  <div id="newsScroller">
    <strong>Breaking news:</strong> Liverpool defeats AC Milan in a  penalty shootout after a shock comeback from 3-0 down in the second half of the Champions' League final.
The width of the newsScroller div is calculated with the following:

  var newsScroller = document.getElementById("newsScroller");

  newsScroller.style.left = 0;

  if (retrieveComputedStyle(newsScroller, "position") == "relative")
    var relativeWidth = newsScroller.offsetWidth;

    newsScroller.style.position = "absolute";
    newsScroller.calculatedWidth = newsScroller.offsetWidth;

    if (relativeWidth > newsScroller.calculatedWidth)
      newsScroller.calculatedWidth = relativeWidth;
    newsScroller.style.position = "relative";
    newsScroller.calculatedWidth = newsScroller.clientWidth;
I'm using this ticker to replace a flash piece mainly because the flash piece can only carry a link to one url, but also because this degrades somewhat without js. The flash piece is running now on our home page:


The problem is that when <a></a> tags or other html markup are introduced to the contents in the newsScroller div, it doesn't allow much content. I've tried it with the unordered list with <a> tags you can see in the beta version, and I also tried it with only <a> tags. Both approaches don't allow many more than three short text links to be presented ... anything more than that is truncated.

I'm hoping someone can tell me how to either:
modify the js so the newsScoller div's width is greater or:
help me find html markup that will allow longer and more text links.

Thanks for your help,

Eric Hobart
Web manager
Norwich University