modify Javascript Anthology news ticker to accommodate multiple text links
I've added a news ticker to a beta page i'm working on:
http://www.norwich.edu/indexCLIPticker.html
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>):
Code:
<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.
</div>
</div>
The width of the newsScroller div is calculated with the following:
Code:
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";
}
else
{
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:
http://www.norwich.edu
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