Solved

Javascript scrolling title modifications

Posted on 2007-12-03
8
729 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 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