Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

using RSS feeds in javascript

0 votes
317 views
in Technique[技术] by (71.8m points)

using RSS feeds in javascript

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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 :)


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

56.8k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...