Leveraging RSS feeds with JavaScript

I have a query regarding the use of Google Feed. It is assisting me in displaying RSS feeds through JavaScript. First, I will present the code and then I will pose my question.

JavaScript Section:

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

Content Area:

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

Currently, I am utilizing the aforementioned Google Feed code along with another JavaScript to exhibit messages via horizontal scrolling. Both functionalities are operational, but my objective is to render the RSS feed within this horizontal scrolling section. Upon running the code, initial display showcases the titles of the RSS feeds followed by the horizontal scrolling feature at the bottom. The scrolling function retrieves values from an array known as "sglm," as delineated in the JavaScript Section. For instance, it must adhere precisely to this format or else the process may not function correctly;

sglm[0] = 'Hello World'

My aim is to integrate the titles from the RSS feeds into this array in the stipulated format. Despite my attempts, I am unable to successfully accomplish this task and hence seek assistance. Furthermore, the RSS feed titles are contained within a division labeled "feed." Your cooperation is greatly appreciated.

Answer №1

Well that was quite an experience...LOL! ;)
I had to tweak the ticketer a bit because I couldn't wrap my head around updating it the way it was set up. Now, there's a simple function called tickerUpdateItems where you just need to pass an array of items and it will update smoothly.
Check out the updated source code below:

<!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">

// Code for horizontal scrolling goes here...

    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); // Updating ticker with RSS feed entries
        }
      });
    }
    google.setOnLoadCallback(initialize);
    
// End of RSS to JavaScript conversion

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

Fingers crossed, hope this setup works seamlessly for you :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200

Having recently delved into Angular, I successfully completed the development of my angular web application. While using ng serve for production, everything ran smoothly. However, after incorporating angular universal and attempting npm run dev:ssr or np ...

What is the best way to utilize the each method within jQuery plugins?

I am relatively new to JavaScript and jQuery plugin development, so please bear with me if this question seems silly. I am struggling with a particular aspect of the following plugin script: (function($){ $.fn.test = function(){ var containe ...

How come I am unable to save an array of objects in a State within React JS?

React JS component: When I make a request to the backend to fetch data stored in a MySQL table, it returns an array of objects. I store this data in a state called `favcoin`. However, when I console.log(favcoin), it displays an empty array [ ]. Strangely, ...

Utilize the power of Javascript/AJAX or jQuery to submit multiple forms simultaneously

I am currently working on a project which involves having 3 forms on a single page. The reason behind this is that one of the forms is displayed in a modal dialog. My goal is to allow users to submit all 3 forms with a single button click, and I also wan ...

Is it possible to retrieve JavaScript object properties using HTML elements?

I have fetched an array of objects using jQuery.getJSON(). Each object should be represented by an HTML div element, allowing users to click on the element and access all properties of the corresponding object. What is the most efficient approach for achie ...

How can a border be applied to a table created with React components?

I have been utilizing the following react component from https://www.npmjs.com/package/react-sticky-table Is there a method to incorporate a border around this component? const Row = require("react-sticky-table").Row; <Row style={{ border: 3, borderco ...

Inserting a Specific Iframe into a Designated Location in HTML with the Help of Jquery

Currently, I am encountering an issue with placing a dynamically created iframe inside a specific section of my webpage. The iframe is supposed to be contained within a div element named "maps", but instead it is appearing at the bottom of the page.This ma ...

Retrieving objects from JSON data

I'm facing a challenge in creating a React component that showcases test results from various courses. The issue lies in accessing the scores object within the provided JSON file. Here is an excerpt from the JSON data I am currently working on: [ ...

Sliding the container with a width adjustment and left margin fails to display all images

In the provided HTML code below, there is a functionality to move images horizontally by clicking on buttons: $(document).ready(function() { calculate_width(); $('#moveleft').click(function() { var loga = $('#marki #loga'); ...

Utilize module.exports to export objects containing callback functions

I am currently diving into the world of writing my own modules for nodejs. My goal is to create various objects that I can use throughout my application. Here is the result I am aiming for: //assuming we have a database: Person_table(ID int A_I, NAME var ...

What steps can I take to verify that all textboxes are filled and checkboxes are selected before allowing the user to submit the form?

Here is the JavaScript code and a snippet of the HTML that I am using to create a form. I am having trouble figuring out why the form can still be submitted even when there are empty fields. Ideally, a dialog box should pop up indicating which fields nee ...

Utilizing JavaScript to dynamically update the user interface after submitting a form using jQuery

I am working on implementing an Input element that triggers a form submission: <input type="submit" value="Download" id="downloadButton" class="btn-download" /> The specific requirement is for the button to first execute a javascript function and t ...

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

I am currently working on a Display component that is supposed to show an item. The item should be styled with the css property text-decoration-line, applying line-through when the Available prop is set to false, and no decoration when set to true. Howev ...

Initiate the Bull Queue Process upon launching the Application

As I develop my API, I am setting up a queue and adding jobs to it. Additionally, I have configured the API to start processing these jobs as soon as they are added. const newQueue = createQueue(queueName, opts); newQueue.add('JokesJob', data, o ...

Repeated information in HTML tables

I am currently working with two HTML tables and two sets of JSON data. Initially, I load one table with the tableData which has a default quantity of 0. In my HTML form, there are three buttons - save, load draft, and edit. Upon clicking on load draft, I p ...

Updating the Background Image Based on Text Input in JavaScript

Struggling to utilize the text entered into a text input field as a background image URL. Ensuring it is valid is key. This snippet displays what has been attempted so far... CSS: body { margin: 0px; padding: 0px; border: 0px; } .bgimg { backgr ...

Tips for incorporating external functions into Vue Component data synchronization:

As someone new to JavaScript, I am trying to incorporate external functions into Vue component data bindings, but I am encountering issues. helper.js function groupArrayOfObjects(list, key) { return blah blah } function parseDate(d) { ret ...

Find all elements with the same class and identify the first element among them using jQuery

In my dynamic data structure, I need to filter out all elements with the class name "My_data" and select the first one. In the code below, I am looking to retrieve the first element with the class "My_data". <div class="all_data"> <div class="lis ...

Guide to displaying a function result in Vue 3

I have just started learning vue js and I am facing an issue. I want to display the value returned by the following function in a table row: The function is: getGroup(id){ this.users.forEach(element =>{ if(element.id===id) ...

What is the method for determining the active configuration?

I am working with a MongoDB database that consists of 3 collections. Each collection is exemplified below by a document: tag _id: ObjectId('61b873ec6d075801f7a97e18') name: 'TestTag' category: 'A' computer _id: ObjectId(&apo ...