www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to build and Code a news aggregator tool

  1. #1
    Join Date
    Sep 2008
    Posts
    3

    How to build and Code a news aggregator tool

    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/

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Sep 2008
    Posts
    3
    Awesome, thank you very much

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Sep 2008
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles