Solved

Javascript scrolling title modifications

Posted on 2007-12-03
8
685 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
  • 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP preg_replace code convert to Delphi 14 36
PHP warning 4 30
WP_Query multiple custom taxonomies 5 28
PHP populating an array. 4 0
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

867 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now