using RSS feeds in javascript

Question

I have a question about Google Feed. It helps me to display RSS by using javascript. First I want to show the code, then I'm going to ask my question.

JS Part:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script language="javascript">

var sglm=new Array();
sglm[0]= 'ahmet tanakol';

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

function initialize() {
  var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/rss/rss.xml");
  feed.setNumEntries(6);

  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {

        var entry = result.feed.entries[i];
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(entry.title));
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

Body:

<body onload="startbcscroll();" bgcolor="#ffffcc" text="navy"><center>
<div id="feed"></div>

Ok, I'm using this Google Feed code and another js to display messages in a horizontal scrolling. Both of them are working now, but I want to display RSS feed in this horizontal scrolling. When I run the code, first it displays titles of Rss feeds, then at the bottom there is a horizontal scrolling. In this horizontal scrolling, it takes values from an array called "sglm". You can see it in JS Part. For example it has to be exactly in this format othersiw it won't work;

sglm[0] = 'Hello World'

Now I want to put titles from RSS feeds into this array in this format. I couldn't figure it out, so maybe you can help me. By the way,it puts Rss feeds titles into a div with id feed. Thank you.

Im not totally sure I get your question but if I do then all you should have to do is, after div.appendChild(document.createTextNode(entry.title)); add sglm.push(entry.title); — PAEz
I tried what you said to me, but it didn't work. For displaying it I'm using a horizontal scrolling menu. It says I should exactly assign an element in this format sglm[0]= 'Hello world'. When I wrote sglm.push(entry.title), it says undefined instead of title of my entry. — Ahmet Tanakol
I also tried this one sglm[0] = '' + entry.title, still it says undefined. — Ahmet Tanakol
Ive never used this api before, but gave it a go and some things about it confuse the hell out of me. Is there any chance you could put all your source up somewhere (like pastebin) so I could have a look at it and I might be able to help you then. Sorry, but its driving me nuts. — PAEz
I uploaded my rar file here depositfiles.com/files/qql5ukydq I put some marks for you. You will see an array at the beginning of javascript part.I want to put for example RSS feeds titles there. I hope you can figure it out. — Ahmet Tanakol

PAEz PAEz · Accepted Answer · 2012-07-23T13:54:31

Well that was fun....NOT! ;)
I had to change the way the ticketer worked a little as I couldn't figure how to update it the way it was. You now have an easy function tickerUpdateItems that you just pass an array of items and it will update.
Here's the new source....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS-Ticker</title>
<style> <!--
BODY, P, SPAN, DIV, TABLE, TD, TH, UL, OL, LI {
  font-family: Arial, Helvetica;
  font-size: 14px;
  color: black;
}
.code {
  font-family: Courier New, Monospace;
  font-size: 12px;
  margin: 10px;
  padding: 0px;
  color: blue;
}
--> </style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">



//THIS IS MY HORIZONTAL SCROLLING. RSS TO JAVASCRIPT CODE IS AT THE END OF IT!!!!!

var tickerEntries = new Array(
    "Hello!",
    "Use this script to create a news ticker.",
    "You can also use <b>HTML tags</b>.",
    "The quick brown fox jumps over the lazy dog."
);

//---------------------------------------------------------------------------------------------------------
// Configuration
//---------------------------------------------------------------------------------------------------------

var tickerWidth = 400;                              // width (pixels)
var tickerMargin = 20;                              // margin (pixels)
var tickerDelay = 30;                               // scrolling delay (smaller = faster)
var tickerSpacer = "+++";                           // spacer between ticker entries

var tickerBGColor = "#E0F0FF";                      // background color
var tickerHLColor = "#FFF0E0";                      // hilight (mouse over) color

var tickerFont = "Courier New, Courier, Monospace"; // font family (CSS-spec)
var tickerFontSize = 16;                            // font size (pixels)
var tickerFontColor = "blue";                       // font color

var tickerBorderWidth = 2;                          // border width (pixels)
var tickerBorderStyle = "groove";                   // border style (CSS-spec)
var tickerBorderColor = "#FFFFFF";                  // border color

//---------------------------------------------------------------------------------------------------------
// Functions
//---------------------------------------------------------------------------------------------------------

var DOM = document.getElementById;
var IE4 = document.all;

var tickerIV, tickerID;
var tickerItems = new Array();
var tickerHeight = tickerFontSize + 8;

function tickerGetObj(id) {
    if(DOM) return document.getElementById(id);
    else if(IE4) return document.all[id];
    else return false;
}

function tickerObject(id) {
    this.elem = tickerGetObj(id);
    this.width = this.elem.offsetWidth;
    this.x = tickerWidth;
    this.css = this.elem.style;
    this.css.width = this.width + 'px';
    this.css.left = this.x + 'px';
    this.move = false;
    return this;
}

function tickerNext() {
    if(!DOM && !IE4) return;
    var obj = tickerItems[tickerID];
    if(obj) {
        obj.x = tickerWidth;
        obj.css.left = tickerWidth + 'px';
        obj.move = true;
    }
}

function tickerMove() {
    if(!DOM && !IE4) return;
    for(var i = 0; i < tickerItems.length; i++) {
        if(tickerItems[i].move) {
            if(tickerItems[i].x > -tickerItems[i].width) {
                tickerItems[i].x -= 2;
                tickerItems[i].css.left = tickerItems[i].x + 'px';
            }
            else tickerItems[i].move = false;
        }
    }
    if(tickerItems.length == 1) {
        if(tickerItems[tickerID].x + tickerItems[tickerID].width <= 0) {
            tickerNext();
        }
    }
    else if(tickerItems[tickerID].x + tickerItems[tickerID].width <= tickerWidth) {
        tickerID++;
        if(tickerID >= tickerItems.length) tickerID = 0;
        tickerNext();
    }
}

function tickerStart(init) {
    if(!DOM && !IE4) return;
    if(tickerBGColor) {
        var obj = tickerGetObj('divTicker');
        obj.style.backgroundColor = tickerBGColor;
    }
    if(init) {
        tickerID = 0;
        tickerNext();
    }
    if (tickerIV) clearInterval(tickerIV);
    tickerIV = setInterval('tickerMove()', tickerDelay);
}

function tickerStop() {
    if(!DOM && !IE4) return;
    clearInterval(tickerIV);
    if(tickerHLColor) {
        var obj = tickerGetObj('divTicker');
        obj.style.backgroundColor = tickerHLColor;
    }
}

function tickerInit() {
    if(!DOM && !IE4) return;

    var obj = tickerGetObj('divTicker');
    obj.style.width = tickerWidth + 'px';
    obj.style.visibility = 'visible';
    //tickerStart(true);
    tickerUpdateItems(tickerEntries);
}

function tickerReload() {
    if(!DOM && !IE4) return;
    document.location.reload();
}

//window.onresize = tickerReload;
window.onload = tickerInit;

//---------------------------------------------------------------------------------------------------------
// Build ticker
//---------------------------------------------------------------------------------------------------------

document.write(
    '<style> ' +
    '#divTicker { ' +
    'position: absolute; ' +
    'width: 10000px; ' +
    'height: ' + tickerHeight + 'px; ' +
    'cursor: default; ' +
    'overflow: hidden; ' +
    'visibility: hidden; ' +
    (tickerBorderWidth ? 'border-width: ' + tickerBorderWidth + 'px; ' : '') +
    (tickerBorderStyle ? 'border-style: ' + tickerBorderStyle + '; ' : '') +
    (tickerBorderColor ? 'border-color: ' + tickerBorderColor + '; ' : '') +
    '} ' +
    '.cssTickerContainer { ' +
    'position: relative; ' +
    'height: ' + tickerHeight + 'px; ' +
    'margin-top: ' + tickerMargin + 'px; ' +
    'margin-bottom: ' + tickerMargin + 'px; ' +
    '} ' +
    '.cssTickerEntry { ' +
    'position:absolute;top:2px; white-space:nowrap;'+
    'font-family: ' + tickerFont + '; ' +
    'font-size: ' + tickerFontSize + 'px; ' +
    'color: ' + tickerFontColor + '; ' +
    '} ' +
    '</style>'
);
function tickerUpdateItems(items) {
    var ticker = document.getElementById('divTicker');
    ticker.innerHTML = '';
    if (items.length > 0) {
        for (var i = 0; i < items.length; i++) {
            var tickerItem = document.createElement('DIV');
            tickerItem.id = 'divTickerEntry' + (i + 1);
            tickerItem.className  = 'cssTickerEntry';
            tickerItem.innerHTML ='&nbsp;' + items[i] +'&nbsp;' +tickerSpacer;
            ticker.appendChild(tickerItem);
        }
    }
    tickerItems=[];
    for (var i = 0; i < items.length; i++) {
        tickerItems[i] = new tickerObject('divTickerEntry' + (i + 1));
    }
    tickerStart(true);
}
/*document.write(
    '<div class="cssTickerContainer">' +
    '<div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()">'
);

for(var i = 0; i < tickerEntries.length; i++) {
    document.write(
        '<div id="divTickerEntry' + (i+1) + '" class="cssTickerEntry" ' +
        'style="position:absolute; top:2px; white-space:nowrap">' +
        tickerEntries[i] + ((tickerEntries.length > 1) ? ' ' + tickerSpacer + '&nbsp;' : '') +
        '</div>'
    );
}

//END OF HORIZONTAL SCROLLER
//---------------------------------------------------------------------------------------------------------

// THIS IS WHERE I TRANSFORM RSS TO JAVASCRIPT!!!!!!!!!!!!!!!!!!!!!!!
document.write('</div></div>');*/

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

    function initialize() {
      var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/rss/rss.xml");
      feed.setNumEntries(6);

      feed.load(function(result) {
        if (!result.error) {
            var titles=[];
          var container = document.getElementById("feed");
          var html = '';
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            titles.push(entry.title);
           html += '<p>' + entry.publishedDate + '&nbsp' + entry.title;
          }
          container.innerHTML = html;
          tickerUpdateItems(titles);
        }
      });
    }
    google.setOnLoadCallback(initialize);

// END OF RSS TO JAVASCRIPT

</script>
</head>
<body>
    <div class="cssTickerContainer"><div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()"></div></div>
<div id="feed"></div>
</body>
</html>

....hope it works out for you :)

using RSS feeds in javascript

1 Answers