Solved

Javascript scrolling title modifications

Posted on 2007-12-03
8
672 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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…

706 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

19 Experts available now in Live!

Get 1:1 Help Now