PDA

View Full Version : Can you show multiple headlines and time only with rsspausescroller?



Sam_Dynamic
07-03-2011, 10:24 PM
1) Script Title: Can you show multiple headlines and time only with rsspausescroller?

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/rsspausescroller/

3) Describe problem:

I would like to show a news feed on my web page like

News Headlines

10:32am UK aid for drought-hit Ethiopia

11:15am 750,000 Olympics tickets are sold

12:30pm Call for cross-party care talks

the rest of the news just rotate.

Can rsspausescroller do this? I've been trying to alter the code in the last little while but no success. if it is possible which part of the code should I focus on? If it is not possible with rsspausescroller, anyone has any other news reader suggestions?

Thanks heaps.
S:)

vwphillips
07-04-2011, 03:39 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:absolute;left:100px;top:100px;width:200px;height:50px;border:solid red 1px;

}

.rssentry { /* div containing of each RSS entry */
background-Color:#FFFFCC;width:200px;font-Size:12px;padding:5px;
}

.rsslink{
font-weight:bold;
}

.rsscontent { /* div containing body of each RSS content */
margin-Top:10px;font-Size:14px;
}

.rsssource { /* div containing body of each RSS source */
font-Size:14px;font-Weight:bold;margin-Top:5px;
}

.rssdate { /* div containing body of each RSS date */
font-Size:10px;margin-bottom:5px;
}

/*]]>*/
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAR-9WkyP0pB4sC0XRUInk-hTK_A2Yp4R0tJ85IXPWUgRG3Of69RShErwPvaZjC9HP_59iklYQkPthCw">
</script>

<script type="text/javascript">
/*<![CDATA[*/

google.load('feeds','1');

/*]]>*/
</script>

</head>

<body>

<div id="tst" ></div>

<script type="text/javascript">
/*<![CDATA[*/
// RSS Scroller (04-July-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

/*
** Optional RSS Feed.
Each feed element consists of a 'link', 'content', 'source', 'date' and 'time'.
The 'source', 'date' and 'time' are optional.
The 'link', 'content', 'source', 'date' and 'time' appearance is defined by CSS class name.
These class names are:
for the 'link', 'rsslink',
for the 'content', 'rsscomtent',
for the 'source', 'rsssource',
for the 'date' and 'time', 'rssdate',
These class names must be defined in the page CSS.

**** RSS Feeds.

to use the RSS Feed option the following scripts need to be placed in the page header.

<script type="text/javascript" src="http://www.google.com/jsapi?key=MyGoggleAPIKey">
/script>

<script type="text/javascript">
google.load('feeds','1');
/script>

'MyGoggleAPIKey' needs to replaced with your own Google API Key.
Go to:
http://code.google.com/apis/loader/signup.html
and enter your site's domain to obtain your own key.

*/


function zxcRSSScroller(o){
var oop=this,obj=document.getElementById(o.ID),ud=o.Direction,ms=o.AnimationDuration;
obj.style.overflow='hidden';
this.obj=obj;
this.sz=obj.offsetHeight;
this.w=obj.offsetWidth;
this.ud=isFinite(ud)&&ud>0?1:-1;
this.mS=isFinite(ms)&&ms<0?ms:500;
this.hold=isFinite(o.Hold)?o.Hold:1000;
this.o=o;
setTimeout(function(){ oop.rss(o); },1000);
}

zxcRSSScroller.prototype={

init:function(rssdiv,clds){
var oop=this;
rssdiv.appendChild(clds[0].cloneNode(true));
this.fr=0;
this.to=0;
this.run=true;
this.cnt=0;
this.lgth=clds.length;
this.rssdiv=rssdiv;
rssdiv.style.position='absolute';
this.obj.onmouseover=function(){ oop.Pause(); }
this.obj.onmouseout=function(){ oop.Auto(); }
this.dly=setTimeout(function(){ oop.Auto(); },this.hold);
},

Next:function(){
var ud=this.ud,cnt=this.cnt,lgth=this.lgth,nxt;
if ((ud<0&&cnt==lgth)||(ud>0&&cnt==0)){
cnt=ud<0?0:lgth;
}
nxt=cnt+(ud<0?1:-1);
if (this.fr==this.to&&nxt!=cnt){
clearTimeout(this.dly);
this.fr=cnt*-this.sz;
this.to=nxt*-this.sz;
this.cnt=nxt;
this.run=true;
this.srttime=new Date().getTime();
this.animate();
}
},

Auto:function(){
if (this.fr==this.to){
var oop=this;
this.dly=setTimeout(function(){ oop.Next(); },500);
}
},

Pause:function(){
clearTimeout(this.dly);
this.run=false;
},

animate:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.rssdiv.style.top=(this.to-this.fr)/this.mS*ms+this.fr+'px';
if (ms<this.mS){
setTimeout(function(){oop.animate(); },10);
}
else {
this.fr=this.to;
this.rssdiv.style.top=this.to+'px';
if (this.run){
this.dly=setTimeout(function(){ oop.Next(); },this.hold);
}
}
},

rss:function(o){
var oop=this,z0=0,pointer,feeds=o.Feeds,entries=typeof(o.Entries)=='number'?o.Entries:5;
o.Entries=typeof(o.Entries)=='number'?o.Entries:5;
this.rssary=[];
this.rsscnt=0;
for (;z0<feeds.length;z0++){
pointer=new google.feeds.Feed(feeds[z0][1]);
pointer.setNumEntries(entries);
pointer.load(function(label){ return function(data){ oop.rsscombine(data,label,feeds); } }(feeds[z0][0]));
}
},

rsscombine:function(data,label,feeds){
var feed=!data.error?data.feed.entries:'',z0=0;
if (feed==''){
alert('Google Feed API Error: '+data.error.message);
}
for (;z0<feed.length;z0++){
data.feed.entries[z0].label=label;
}
this.rssary=this.rssary.concat(feed);
this.rsscnt++;
if (this.rsscnt==feeds.length){
if (this.o.GroupByLabel){
this.rssary.sort(function(a,b){
var l='0123456789abcdefghijklmnopqrstuvwxyz';
a=l.indexOf(a.label.toLowerCase().charAt(0));
b=l.indexOf(b.label.toLowerCase().charAt(0));
return a<b?-1:a>b?1:0;
});
}
else {
this.rssary.sort(function(a,b){
return new Date(b.publishedDate)-new Date(a.publishedDate);
});
}
this.rssformat();
}
},

rssformat:function(){
var oop=this,rssdiv=document.createElement('DIV'),o=this.o.DisplayOptions,o=(typeof(o)=='string'?o:'').toLowerCase(),target=this.o.LinkTarget,rssary=this.rssary,cld s=[],a,div,z0=0,date;
this.obj.appendChild(rssdiv);
for (;z0<rssary.length; z0++){
clds[z0]=document.createElement('DIV');
clds[z0].style.height=this.sz+'px';
clds[z0].style.overflow='hidden';
clds[z0].className='rssentry';
rssdiv.appendChild(clds[z0]);
a=document.createElement('A');
a.className='rsslink';
a.href=rssary[z0].link;
if (target){
a.target=target;
}
a.innerHTML=rssary[z0].title;
clds[z0].appendChild(a);

div=document.createElement('DIV');
div.className='rsssource';
div.innerHTML=/source/.test(o)?'Source('+(z0+1)+'): '+rssary[z0].label+' ':'';
clds[z0].appendChild(div);

div=document.createElement('DIV');
div.className='rssdate';
date=new Date(rssary[z0].publishedDate);
div.innerHTML=/date/.test(o)?o.indexOf('time')!=-1?date.toLocaleString():date.toLocaleDateString():'';
clds[z0].appendChild(div);

div=document.createElement('DIV');
div.className='rsscontent';
div.innerHTML=/full/.test(o)?rssary[z0].content:/snippet/.test(o)?rssary[z0].contentSnippet:'';
clds[z0].appendChild(div);
clds[z0].style.height=this.sz-(clds[z0].offsetHeight-this.sz)+'px';
clds[z0].style.width=this.w-(clds[z0].offsetWidth-this.w)+'px';
}
this.init(rssdiv,clds);
}

}


new zxcRSSScroller({
ID:'tst', // the unique ID name of the parent node. (string)
Feeds:[ // the feeds defined in an array. (array)
// field 0 = the source text. (string)
// field 0 = the source url. (string)
['Yahoo News','http://rss.news.yahoo.com/rss/topstories'],
['BBC','http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml/']
],
DisplayOptions:'date time', //(optional) the feed display options, 'date time source full snippet'. (string, default = link)
GroupByLabel:true, //(optional) feed options options. (boolean, default = sort by date)
LinkTarget:'_new', //(optional) the feed links target. (string, default = default target)
Entries:5, //(optional) the number of feeds entries to display. (digits, default = 5)
Direction:-1, //(optional) rotation direction, < 0 = anti-clockwise, > 0 = clockwise. (number, default = -1);
AnimationDuration:500, //(optional) the animation duration in milli seconds. (number, default = 500);
Hold:2000 //(optional) the 'hold' delay between rotation in milli seconds. (number, default = 1000);
});


/*]]>*/
</script></body>

</html>

Sam_Dynamic
07-04-2011, 08:17 PM
Hi Vic,

Thanks very much for your reply, I tried the code but it is behaving like RSSpausescroller. Only one news at a time. I'd like the news like below.


News Headlines

10:32am UK aid for drought-hit Ethiopia

11:15am 750,000 Olympics tickets are sold

12:30pm Call for cross-party care talks

and the rest of the news just rotate up/down.

Is it possible to alter your code to be like that? If so which part shall I alter please? Also do I have to get a google API key?

Thanks very much.
S:)

Sam_Dynamic
07-04-2011, 10:26 PM
I've found the solution already if someone is in the same situation. Here is the link http://net.tutsplus.com/articles/news/how-to-build-a-super-duper-news-scroller/

Thanks everyone. :)