How to build and Code a news aggregator tool

**bigpapi** · 09-17-2008 07:06 AM

I have seen a lot of these news aggregators popping up on a lot of sites and i have tried to search for the code on how to do and accomplish this, but all i keep coming back with is desktop news aggregators.

Can someone help me find the code on how to create a news aggregator to be used on my own personal website, that will cycle through my own personal news items??

I am looking for something similar to the following sites:

http://mapleleafs.nhl.com/

http://www.georgetownraiders.pointstreaksites.com/

**Fang** · 09-17-2008 09:13 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>news rotator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
aLI=document.getElementById('news').getElementsByTagName('li');
for(var i=0; i<aLI.length; i++) {
    aLI[i].style.display="none";
    aLI[i].getElementsByTagName('p')[0].onmouseover=function() {clearTimeout(timerRUN);};
    aLI[i].getElementsByTagName('p')[0].onmouseout=function() {rotate(inView());};
    }
rotate(aLI.length-1);
};

var aLI=[];
var timerRUN=null;
var Speed=3000; //change as required
function rotate(idx) {
aLI[idx].style.display="none";
idx=(idx<aLI.length-1)? ++idx : 0;
aLI[idx].style.display="block";
timerRUN=setTimeout('rotate('+idx+')', Speed);
}

function inView() {
var newsItem=0;
for(var i=0; i<aLI.length; i++) {
    if(aLI[i].style.display=="block") {newsItem= i;}
    }
return newsItem;
}
</script>
<style type="text/css">
#news li {
width:300px;
overflow:hidden;
border:1px solid #000;
list-style-type:none;
color:#000;
background:#ddd;
}
#news li img {
display:block;
}
#news li p {
margin:0;
padding:3px;
}
</style>
</head>
<body>
<ul id="news">
    <li>
        <img src="image1.jpg" width="300" height="200" alt=""><p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
    </li>
    <li>
        <img src="image2.jpg" width="300" height="200" alt=""><p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    </li>
    <li>
        <img src="image3.jpg" width="300" height="200" alt=""><p>Mirum est notare quam littera gothica, quam nunc putamus parum claram.</p>
    </li>
</ul>
</body>
</html>

**bigpapi** · 09-17-2008 09:21 AM

Awesome, thank you very much

**Fang** · 09-17-2008 09:30 AM

You can add as many list items as you wish, as long as the html remains the same.
Mousing over the text will halt the aggregator.

**bigpapi** · 09-17-2008 10:51 AM

How would i take the mouse over feature off. I want to be able to use this news aggregator, so that someone could click on the news article and be directed to a new page where the entire news article exists.

Right now, how it is setup, whenever i move the mouse over the title, it starts changing rapidly between the three list items. I would like to take that option off, so that it still rotates through the images, regardless of where the mouse goes.

One other feature i would like to add to this and i'm struggling with trying to add it myself, is the option to display how many list items the news aggregator has in a bottom toolbar

So, right now there are three list items, i would like to have an option along the bottom, where you could click on the corrsesponding number and it will bring back that news article, rather than having to wait for it to rotate back to the list item you want.

thanks

Thread: How to build and Code a news aggregator tool

Thread Tools

Display

How to build and Code a news aggregator tool

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions