I want to add auto scrolling to my RSS Feed

Question

I'm building an RSS feed to place on my website. I'm pretty much a novice when it comes to JS/jQuery so any help is much appreciated.

I found Google's Feed API and I created my own RSS Reader Widget but it doesn't have any auto scrolling features which is what I want to add next. I found some examples of auto-scrollers like vTicker and this one on jsfiddle.net from another stackoverflow question but I can't seem to figure out how to adapt them to work for my code. Are there any tutorials around that describe how to build something like this?

My RSS feed is built by creating a DIV container and then appending child DIVs to the container with the Title, Description and Date for each feed entry so I imagine "all" I would need to do is scroll through the DIV containers?

Edit: Basically I just want to vertically down the container div until I reach the bottom and then 'wrap-around' to the top again.

This is my HTML/CSS/JS so far:

<head>
<title>Google Feed Loader Example #1</title> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

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

    // Our callback function, for when a feed is loaded.
function feedLoaded(result) {
    if (!result.error) {
        // Grab the container we will put the results into
    var container = document.getElementById("feed");
    container.innerHTML = '';

    // Loop through the feeds, putting the titles onto the page.
    // Check out the result object for a list of properties returned in each entry.
    // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var div1 = document.createElement("div");
      div1.setAttribute("id", "title");
      div1.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
      //div1.appendChild(document.createTextNode(entry.feedUrl));

      var div2 = document.createElement("div");
      div2.setAttribute("id", "description");
      div2.appendChild(document.createTextNode(entry.content));

      var div3 = document.createElement("div");
      div3.appendChild(document.createTextNode(entry.publishedDate));
      div3.setAttribute("id", "date");

      container.appendChild(div1);
      container.appendChild(div2);
      container.appendChild(div3);

      /*var li = document.createElement("li");
      li.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
      li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
      container.appendChild(li);*/
    }
  }
}

function OnLoad() {
  // Create a feed instance that will grab Digg's feed.
  var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
  feed.setNumEntries(15);
  feed.includeHistoricalEntries();
  // Calling load sends the request off.  It requires a callback function.
  feed.load(feedLoaded);
}

    google.setOnLoadCallback(OnLoad);
</script>

<style>
h1 {
background-color:   #356AA0;
}

a {
color:              #FEC659;
}

a:link {
text-decoration:    none;
}

a:visited {
text-decoration:    none;
}

a:hover {
text-decoration:    underline;
}

a:active {
text-decoration:    underline;
}

div {line-height: 1;}
/*h1, p {margin: 0;}    */

div#feed {
width:              330;
height:             150;
overflow-y:         auto;
background-color:   #F8F8F8; /* background-color when image is not shown */
border-top:         1px solid #C0C0C0;
border-bottom:      1px solid #C0C0C0; /* set grey border bottom */
border-left:        1px solid #C0C0C0; /* set grey border left */
border-right:       1px solid #C0C0C0; /* set grey border right */
}

div#title {
/*padding:          5px;*/
background-color:   #FFFFFF;
font-size:          14px; /* sets the font size of the title to 18px*/
font-weight:        bold; /* and bold of course */
color:              #FEC659;
text-decoration:    none;
}

div#description {
color:              #356AA0;
background-color:   #FFFFFF;
padding-bottom:     5px;
}

div#date {
background-color:   #FFFFFF;
color:              #000000;
border-bottom:      1px dotted #C0C0C0;
padding-bottom:     5px;
}

div#header {
width:              330;
background-color:   #356AA0;
font-size:          18px; /* sets the font size of the title to 18px*/
font-weight:        bold; /* and bold of course */
color:              #FFFFFF;
text-decoration:    none;
}

</style>

</head>


<body>
<div id="header">RSS Feed </div>
<div id="feed"></div>
</body>
</html>

Posting an example of the html you are working with would help. — Danny, Mar 05 '13 at 16:35

score 0 · Accepted Answer · answered Mar 05 '13 at 19:34

Here is an example using vTicker since you linked it. I tried to make as little amount of changes as possible to the original code you had above.

<head>
<title>Google Feed Loader Example #1</title> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<script type="text/javascript">
    google.load("feeds", "1");

    // Our callback function, for when a feed is loaded.
function feedLoaded(result) {
    if (!result.error) {
        // Grab the container we will put the results into
    var container = document.getElementById("feed");
    container.innerHTML = '';
            //create a list container for vTicker
    var list = document.createElement("ul");
    container.appendChild(list);
    // Loop through the feeds, putting the titles onto the page.
    // Check out the result object for a list of properties returned in each entry.
    // http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
              //new list item
      var listItem = document.createElement("li");
      var div1 = document.createElement("div");
      div1.setAttribute("id", "title");
      div1.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
      //div1.appendChild(document.createTextNode(entry.feedUrl));

      var div2 = document.createElement("div");
      div2.setAttribute("id", "description");
      div2.appendChild(document.createTextNode(entry.content));

      var div3 = document.createElement("div");
      div3.appendChild(document.createTextNode(entry.publishedDate));
      div3.setAttribute("id", "date");
              //add all child divs to list item
      listItem.appendChild(div1);
      listItem.appendChild(div2);
      listItem.appendChild(div3);
              //add list item to the list container
      list.appendChild(listItem);
      /*var li = document.createElement("li");
      li.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
      li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
      container.appendChild(li);*/
    }
            //add the list container to the containing div
    container.appendChild(list);
    $(container).vTicker({ 
        speed: 500,
        pause: 3000,
        animation: 'fade',
        mousePause: false,
        showItems: 3
    });
  }
}

function OnLoad() {
  // Create a feed instance that will grab Digg's feed.
  var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
  feed.setNumEntries(15);
  feed.includeHistoricalEntries();
  // Calling load sends the request off.  It requires a callback function.
  feed.load(feedLoaded);
}

    google.setOnLoadCallback(OnLoad);
</script>

<style>
h1 {
background-color:   #356AA0;
}

a {
color:              #FEC659;
}

a:link {
text-decoration:    none;
}

a:visited {
text-decoration:    none;
}

a:hover {
text-decoration:    underline;
}

a:active {
text-decoration:    underline;
}

div {line-height: 1;}
/*h1, p {margin: 0;}    */

div#feed {
width:              330;
height:             150;
overflow-y:         auto;
background-color:   #F8F8F8; /* background-color when image is not shown */
border-top:         1px solid #C0C0C0;
border-bottom:      1px solid #C0C0C0; /* set grey border bottom */
border-left:        1px solid #C0C0C0; /* set grey border left */
border-right:       1px solid #C0C0C0; /* set grey border right */
}

div#title {
/*padding:          5px;*/
background-color:   #FFFFFF;
font-size:          14px; /* sets the font size of the title to 18px*/
font-weight:        bold; /* and bold of course */
color:              #FEC659;
text-decoration:    none;
}

div#description {
color:              #356AA0;
background-color:   #FFFFFF;
padding-bottom:     5px;
}

div#date {
background-color:   #FFFFFF;
color:              #000000;
border-bottom:      1px dotted #C0C0C0;
padding-bottom:     5px;
}

div#header {
width:              330;
background-color:   #356AA0;
font-size:          18px; /* sets the font size of the title to 18px*/
font-weight:        bold; /* and bold of course */
color:              #FFFFFF;
text-decoration:    none;
}

</style>

</head>
<body>
<div id="header">RSS Feed </div>
<div id="feed"></div>
</body>
</html>

xRadio.us · Answer 2 · 2013-05-24T04:45:41.663

Since Google abandoned my NEWSSHOW feeds, I decided to try modifying the code above (Danny) to make a simplified credit card size Google News ticker. Most changes were just eliminating unneeded stuff and making significant CSS changes. (Sorry about the screwed-up HTML indenting, this is my first time posting on stackoverflow.)

test URLs:

http://m.gooplusplus.com/gnews360.html?b#Business-News

http://m.gooplusplus.com/gnews-hl.html?b#Business-News

<head>
<title>Google News RSS scroller - param: ?b#Business - News</title> 
<base target = "_blank" />

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<script type="text/javascript">
google.load("feeds", "1");

function feedLoaded(result) {
if (!result.error) {
var container = document.getElementById("feed");
container.innerHTML = '';
var list = document.createElement("ul");
container.appendChild(list);
for (var i = 0; i < result.feed.entries.length; i++) {
  var entry = result.feed.entries[i];
  var listItem = document.createElement("li");
  var div1 = document.createElement("div");
  div1.setAttribute("id", "title");
  div1.innerHTML = "<center style='background-color:#F0F0F0;padding-left:105px;color:#888888;font-size:0.9em;'>--&#160;"+
       location.hash.substr(1) + "&#160;--&#160;&#160;</center>"+ entry.content;

  listItem.appendChild(div1);
  list.appendChild(listItem);
}
container.appendChild(list);
$(container).vTicker({ 
    speed: 150,
    pause: 4000,
    animation: 'fade',
    mousePause: true,
    showItems: 1
});
}
}

function OnLoad() {
var feed = new google.feeds.Feed("http://news.google.com/news/?output=rss&topic="+location.search.substr(1)); 
feed.setNumEntries(15);
feed.includeHistoricalEntries();
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>

<style>
body, table { margin:0px; }
center { text-align:left; }
td { font-size:0.8em; text-align:justify; }
font { font-size:1em; }
img { margin-top:-12px; border:2px solid #CCCCCC; }
a:hover img { border:2px solid red; }
td font div { margin-top:-15px; }
td font div img { display:none; }

a:link,a:visited {  font-size:0px; text-decoration: none; }

div {line-height: 1;}
div a b { color: blue; font-size:11px; }
div a:hover b { color: red; }

div#title { background-color:   #FFFFFF; }

div#feed { 
width:              100%;
max-width:          360px;
height:             auto;
overflow-y:         auto;
background-color:   #F0F0F0; 
border:             1px solid #C0C0C0;
}
</style>
</head>
<body><div id="feed"></div></body>
</html>

I want to add auto scrolling to my RSS Feed

2 Answers2