Solved

Javascript scrolling title modifications

Posted on 2007-12-03
8
720 Views
Last Modified: 2008-02-01
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);
}

Open in new window

0
Comment
Question by:socross
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
8 Comments
 
LVL 31

Accepted Solution

by:
Frosty555 earned 500 total points
ID: 20397662
Okay well first thing, is make scrolling pause for a second when it hits the end of the text. Right now it jerkily jumps back to the beginning immediately making it imposible for you to read the text.

To do this, modify the TICKER_tick() function. I believe this will work.
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;
	        window.setTimeout("TICKER_tick()", 30);
	}
        if(!TICKER_RIGHTTOLEFT && document.getElementById("scrollTicker").scrollLeft >= document.getElementById("scrollTicker").scrollWidth - document.getElementById("scrollTicker").offsetWidth) {
	        window.setTimeout("TICKER_reset()", 3000);
	}
 
}
 
function TICKER_reset() {
	document.getElementById("scrollTicker").scrollLeft = 0;
        window.setTimeout("TICKER_tick()", 30);
}

Open in new window

0
 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 500 total points
ID: 20397743
Next, to make it fade you can use the code I provided above to accomplish that. Something on the order of this:

It should scroll to the right, wait 3 seconds, then fade out, and as soon as it finishes it resets.

I haven't tested this code so it might have syntax errors or little bugs so let me know.
	// USER EDITABLE VARIABLES TO CONTROL BEHAVIOR
	var fadeOutDelta = 5;		// Amount to change opacity by in % for each interval
	var fadeOutWait = 15;		// # of milliseconds to wait inbetween changes to opacity
 
	function fadeOut(objId,opacity) {
	  if (document.getElementById) {
		obj = document.getElementById(objId);
	    	setOpacity(obj, opacity);
 
		if (opacity > 0) {
		  opacity -= fadeOutDelta;
		  window.setTimeout("fadeOut('"+objId+"',"+opacity+")", fadeOutWait);
		}
		else
		{
		  TICKER_reset();
		}
	  }
	}	
	
	
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;
                window.setTimeout("TICKER_tick()", 30);
        }
        if(!TICKER_RIGHTTOLEFT && document.getElementById("scrollTicker").scrollLeft >= document.getElementById("scrollTicker").scrollWidth - document.getElementById("scrollTicker").offsetWidth) {
                window.setTimeout("TICKER_fadeout()", 3000);
        }
 
}
 
function TICKER_fadeout() {
	fadeOut("scrollTicker",100);
}	
 
function TICKER_reset() {
        document.getElementById("scrollTicker").scrollLeft = 0;
        TICKER_tick();
}	

Open in new window

0
 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 500 total points
ID: 20397758
Ooh, I forgot to reset the opacity back to 100% when we're done fading out. change TICKER_reset():
function TICKER_reset() {
    	setOpacity(document.getElementById("scrollTicker"), 100);
        document.getElementById("scrollTicker").scrollLeft = 0;
        TICKER_tick();
}	

Open in new window

0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 500 total points
ID: 20397772
And, hehe, one more minor thing. If you want it to pause for a moment before it *starts* scrolling, so you can see the beginning text, edit TICKER_reset(), and change the call to TICKER_tick() to a setInterval, e.g.

change TICKER_tick() call in TICKER_reset() function to:

          window.setTimeout("TICKER_tick()", 1000);
0
 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 500 total points
ID: 20397781
geez, there's more. It would be helpful if you had the setOpacity function wouldn't it? ;)
	function setOpacity(obj, opacity) {
	  opacity = (opacity >= 100)?99.999:opacity;
	  
	  // IE/Win
	  obj.style.filter = "alpha(opacity:"+opacity+")";
	  
	  // Safari<1.2, Konqueror
	  obj.style.KHTMLOpacity = opacity/100;
	  
	  // Older Mozilla and Firefox
	  obj.style.MozOpacity = opacity/100;
	  
	  // Safari 1.2, newer Firefox and Mozilla, CSS3
	  obj.style.opacity = opacity/100;
	}

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 20399523
Right, just got home lots to get stuck in to here!!  

Before i start putting it all together can i just check a few things.

I probably wasnt clear in my original question but i want to remove the scroll in entirely.  I would like each title/entry to fade in (in place) stay and then fade out.

Is this possible with the code im working with??

Many thanks for all your work so far, sorry if this complicates things!!!

--s--
0
 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 500 total points
ID: 20404273
Well, if it won't scroll just keep in mind that you have to make sure your text isn't bigger than the area you've provided for it to display in ;)

Okay, we need to rethink a lot of the code then. Check out this example:

Note there's a snippet of code you need to fill in. There's the part where you actually *change* the contents of the ticker to another item. So far I don't see this happening anywhere. It's some kind of ajax call, possibly you can just call ReqChange() but I'm not sure. You will need to ensure that you do that. I put a comment saying "TODO" in the place where you need to put that in.
////////// 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)
	{
		fadeOut("scrollTicker", 100);
	}
	else
	{
		// We're paused, wait a bit and try again
		window.setTimeout("TICKER_tick()", 100);
	}
}
 
 
function TICKER_fadeoutdone() {
	// TODO: Change the text using ajax!
	fadeIn("scrollTicker", 0);
}
 
 
function TICKER_fadeindone() {
	// Queue the next change
	window.setTimeout("TICKER_tick()", 5000);
	
}
 
 
////////// FADING CODE /////////////////////////////////////////////////
 
	// USER EDITABLE VARIABLES TO CONTROL BEHAVIOR
	var fadeDelta = 5;		// Amount to change opacity by in % for each interval
	var fadeWait = 15;		// # of milliseconds to wait inbetween changes to opacity
 
	// Starting opacity is what you pass in
	function fadeOut(objId,opacity) {
	  if (document.getElementById) {
		obj = document.getElementById(objId);
	    	setOpacity(obj, opacity);
 
		if (opacity > 0) {
		  opacity -= fadeDelta;
		  window.setTimeout("fadeOut('"+objId+"',"+opacity+")", fadeWait);
		}
		else
		{
		  TICKER_fadeoutdone();
		}
	  }
	}
 
	// Starting opacity is what you pass in
	function fadeIn(objId,opacity) {
	  if (document.getElementById) {
		obj = document.getElementById(objId);
	    	setOpacity(obj, opacity);
 
		if (opacity < 100) {
		  opacity += fadeDelta;
		  window.setTimeout("fadeIn('"+objId+"',"+opacity+")", fadeWait);
		}
		else
		{
		  TICKER_fadeindone();
		}
	  }
	}
 
	// objID - string of ID of object to fade
	// opacity - opacity to set the object to
	// dir - 1 to fade in, -1 to fade out
	function fade(objId,opacity,dir) {
	  if (document.getElementById) {
		obj = document.getElementById(objId);
	    	setOpacity(obj, opacity);
 
		if (opacity > 0 && dir == -1) || (opacity < 100 && dir == 1) {
		  opacity += fadeDelta * dir;
		  window.setTimeout("fade('"+objId+"',"+opacity+")", fadeWait);
		}
	  }
	}
 
	function setOpacity(obj, opacity) {
	  opacity = (opacity >= 100)?99.999:opacity;
	  
	  // IE/Win
	  obj.style.filter = "alpha(opacity:"+opacity+")";
	  
	  // Safari<1.2, Konqueror
	  obj.style.KHTMLOpacity = opacity/100;
	  
	  // Older Mozilla and Firefox
	  obj.style.MozOpacity = opacity/100;
	  
	  // Safari 1.2, newer Firefox and Mozilla, CSS3
	  obj.style.opacity = opacity/100;
	}

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 20512171
Many thanks for all your help.

I also found this which uses the lastrss class

http://www.dynamicdrive.com/dynamicindex17/rsstickerajax/index.htm

http://lastrss.oslab.net - code

--s--
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question