Javascript scrolling title modifications

HI

I am using a small script which gets data from an rss feeds displays it in a scrolling bar.

The php script seems to work really well, and gets the info from the xml well, but i really dont like the transition.

My JS knowledge is limited, can anyone suggest mods that could change the trasition

We would like to try

1.  fade in, fade out,
2. slide in from the top/and out at the bottom

Any help would be much apprciated!!

NB the other thought could be a bbc style ticker, but we feel this may not work well.

URL http://www.curtis-frank.com/dev

Many many thanks

--s--

////////// INITIALIZATION CODE /////////////////////////////////////////
var ajaxRSS = false; // XMLHttpRequest Object
var rssURL = 'functions/redir_feed.php'; // url of RSS (NOTE: this must be on your own domain)
 
if (window.XMLHttpRequest) // try to create XMLHttpRequest
	ajaxRSS = new XMLHttpRequest();
 
if (window.ActiveXObject)	// if ActiveXObject use the Microsoft.XMLHTTP
	ajaxRSS = new ActiveXObject("Microsoft.XMLHTTP");
 
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_PAUSED = false;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444;";
 
// start the program going
RSSRequest();
 
////////// AJAX RSS READING CODE ////////////////////////////////////////
function ReqChange() {
 
	// If data received correctly
	if (ajaxRSS.readyState==4) {
 
		// if data is valid
		if (ajaxRSS.responseText.indexOf('invalid') == -1) 
		{ 	
			// Parsing RSS
			var node = ajaxRSS.responseXML.documentElement; 
			
			
			// Get Channel information
			var channel = node.getElementsByTagName('channel').item(0);
			var title = channel.getElementsByTagName('title').item(0).firstChild.data;
			var link = channel.getElementsByTagName('link').item(0).firstChild.data;
			
			content = '';
		
			// Browse items
			var items = channel.getElementsByTagName('item');
			for (var n=0; n < items.length; n++)
			{
				var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;
				var itemLink = items[n].getElementsByTagName('link').item(0).firstChild.data;
				try 
				{ 
					var itemPubDate = '<font color=gray>['+items[n].getElementsByTagName('pubDate').item(0).firstChild.data+'] ';
				} 
				catch (e) 
				{ 
					var itemPubDate = '';
				}
				
				//if(content!='')
				//	content += ' | ';
 
				if(n%2==1)
					content += "<span>&nbsp;&nbsp;";
				else
					content += "<span>&nbsp;&nbsp;<b>";
				content += '<a href="'+itemLink+'">'+itemTitle+'</a>';
				if(n%2==1)
					content += "&nbsp;&nbsp;</span>";
				else				
					content += "&nbsp;&nbsp;</b></span>";
			}
			
			// Display the result
			document.getElementById("scrollTicker").innerHTML = content;
 
			// start the ticker scrolling
			initticker();
			
		}
		else {
			// oops... error requesting data
			document.getElementById("scrollticker_internal").innerHTML = "Error requesting data.";
		}
	}
}
 
/*
* Main AJAX RSS reader request
*/
function RSSRequest() {
 
	// Prepare the request
	ajaxRSS.open("GET", rssURL , true);
	// Set the onreadystatechange function
	ajaxRSS.onreadystatechange = ReqChange;
	// Send
	ajaxRSS.send(null); 
}
 
////////// SCROLLING DIV CODE ///////////////////////////////////////////
function initticker()
{
	TICKER_CONTENT = document.getElementById("scrollTicker").innerHTML;
 
	var tickerSupported = false;
	TICKER_WIDTH = document.getElementById("scrollTicker").style.width;
	var img = "<img src='blank.gif' width="+TICKER_WIDTH+" height=1>";
 
	// Firefox
	if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
		document.getElementById("scrollTicker").innerHTML = "<TABLE  cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='scrollticker_internal' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
		tickerSupported = true;
	}
	// IE
	if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
		document.getElementById("scrollTicker").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='scrollticker_internal' width='100%'></SPAN>"+img+"</DIV>";
		tickerSupported = true;
	}
	if(!tickerSupported) document.getElementById("scrollTicker").outerHTML = ""; else {
		document.getElementById("scrollTicker").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("scrollTicker").scrollWidth - document.getElementById("scrollTicker").offsetWidth : 0;
		document.getElementById("scrollticker_internal").innerHTML = TICKER_CONTENT;
		document.getElementById("scrollTicker").style.display="block";
		TICKER_tick();
	}
}
 
function TICKER_tick() {
	if(!TICKER_PAUSED) document.getElementById("scrollTicker").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
	if(TICKER_RIGHTTOLEFT && document.getElementById("scrollTicker").scrollLeft <= 0) document.getElementById("scrollTicker").scrollLeft = document.getElementById("scrollTicker").scrollWidth - document.getElementById("scrollTicker").offsetWidth;
	if(!TICKER_RIGHTTOLEFT && document.getElementById("scrollTicker").scrollLeft >= document.getElementById("scrollTicker").scrollWidth - document.getElementById("scrollTicker").offsetWidth) document.getElementById("scrollTicker").scrollLeft = 0;
	window.setTimeout("TICKER_tick()", 30);
}

Select allOpen in new window