Code:
<!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,clds=[],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>
Can you show multiple headlines and time only with rsspausescroller?
Reply With Quote
Bookmarks