landsurveyorsunited/horizonally-scrolling-rss-feed.markdown

## horizonally-scrolling-rss-feed.markdown

      
    Raw
  

              horizonally-scrolling-rss-feed.markdown
            
          
    horizonally scrolling RSS feed

A Pen by JFarrow on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>RSS Feed Scroller</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  <style>
   .feed-container {
      overflow-x: auto;
      white-space: nowrap;
      padding: 20px;
    }

    .feed-item {
      display: inline-block;
      width: 300px;
      padding: 10px;
      margin-right: 10px;
      background-color: #000000;
      color:#fff;
      border-radius: 5px;
    }

    .feed-title {
      font-size: 18px;
      white-space: wrap;
      font-weight: bold;
    }

    .feed-description {
      margin-top: 5px;
      white-space: wrap;
    }
.feed-description {
  margin-top: 5px;
  max-width: 100%;
  height:200px;
  word-break: break-word; /* Ensure that long content wraps properly *//* To prevent images from overflowing */
}
    .feed-link {
      color: #fff;
      text-decoration: none;
      background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%,  rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );padding:5px;border-radius:5px;
    }
     .feed-link:hover {
      color: yellow;
      text-decoration: none;
    }
    option {
    font-weight: normal;
    display: block;
    white-space-collapse: collapse;
    text-wrap: nowrap;
    min-height: 2.2em!important;
    padding: 0px 2px 1px;
}
select#feedSelect.feed-select {font-size:2.1em!important;}
    div.text-center.mt-3 {background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%,  rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );color:#fff;padding:20px;margin:20px;border-radius:10px;}
    .feed-date {
      display:none!important;
      margin-top: 10px;
      font-size: 14px;
      color: yellow;
    }

    .feed-tags {
      margin-top: 10px;
    }
img {width:100%!important;}
    .feed-tag {
      display: inline-block;
      padding: 2px 5px;
      margin-right: 5px;
      background-color: #e9ecef;
      color: #333;
      font-size: 12px;
      border-radius: 3px;
    }
    spam.visually-hidden {color:#000}
  </style>
</head>
<body>
  <div class="feed-container">
      <!-- Loading Indicator -->
      <div class="text-center">
        <img src="https://storage.ning.com/topology/rest/1.0/file/get/12130907698?profile=original" alt="Loading..." class="img-fluid" style="width: 200px;">
      </div>
    </div>
    <div class="text-center mt-3">
      <label for="feedSelect" class="form-label">Select a feed from a section of the community:</label>
      <select id="feedSelect" class="form-select">
        <option value="https://landsurveyorsunited.com/articles/feed/all">Surveying Articles</option>
        <option value="https://landsurveyorsunited.com/video/feed/all">Surveying Videos</option>
        <option value="https://landsurveyorsunited.com/photo/feed/all">Surveying Photos</option>
          <option value="https://landsurveyorsunited.com/forum/topics/feed/all">Surveyor Forum</option>
          <option value="https://landsurveyorsunited.com/hubs/ai/forum/topics/feed/all">Survey</option>
      </select>
      <button id="loadFeedBtn" class="btn btn-primary mt-3">Load This Feed Above</button>
    </div>
  </div>
  <div class="container">
    <div class="feed-container">
      <!-- Loading Indicator -->
      <div class="text-center">
        <img src="https://storage.ning.com/topology/rest/1.0/file/get/12130907698?profile=original" alt="Loading..." class="img-fluid" style="width: 200px;">
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
 <script>
    // Fetch RSS feed from URL
    function fetchRssFeed(url) {
      const container = document.querySelector('.feed-container');
      container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading Articles...</span></div></div>';

      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          renderFeed(response);
        }
      };
      xhr.open('GET', `https://api.rss2json.com/v1/api.json?rss_url=${url}`, true);
      xhr.send();
    }

    function renderFeed(feed) {
      const container = document.querySelector('.feed-container');
      container.innerHTML = '';

      feed.items.forEach(function(item) {
        const feedItem = document.createElement('div');
        feedItem.classList.add('feed-item');

        const title = document.createElement('div');
        title.classList.add('feed-title');
        title.textContent = item.title;
        feedItem.appendChild(title);

        const description = document.createElement('div');
        description.classList.add('feed-description');
        const parser = new DOMParser();
        const descriptionContent = parser.parseFromString(item.description, 'text/html');
        description.appendChild(descriptionContent.body);
        feedItem.appendChild(description);

        const link = document.createElement('a');
        link.classList.add('feed-link');
        link.href = item.link;
        link.textContent = 'Read More';
        feedItem.appendChild(link);

        const date = document.createElement('div');
        date.classList.add('feed-date');
        date.textContent = new Date(item.pubDate).toDateString();
        feedItem.appendChild(date);

        const tags = document.createElement('div');
        tags.classList.add('feed-tags');
        item.categories.forEach(function(tag) {
          const tagElement = document.createElement('span');
          tagElement.classList.add('feed-tag');
          tagElement.textContent = tag;
          tags.appendChild(tagElement);
        });
        feedItem.appendChild(tags);

        container.appendChild(feedItem);
      });
    }

    // Load selected feed when button is clicked
    document.getElementById('loadFeedBtn').addEventListener('click', function() {
      const feedSelect = document.getElementById('feedSelect');
      const selectedFeed = feedSelect.value;
      fetchRssFeed(selectedFeed);
    });

    // Load default feed on page load
    fetchRssFeed('https://landsurveyorsunited.com/articles/feed/all');
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>RSS Feed Scroller</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
	<style>
	.feed-container {
	overflow-x: auto;
	white-space: nowrap;
	padding: 20px;
	}

	.feed-item {
	display: inline-block;
	width: 300px;
	padding: 10px;
	margin-right: 10px;
	background-color: #000000;
	color:#fff;
	border-radius: 5px;
	}

	.feed-title {
	font-size: 18px;
	white-space: wrap;
	font-weight: bold;
	}

	.feed-description {
	margin-top: 5px;
	white-space: wrap;
	}
	.feed-description {
	margin-top: 5px;
	max-width: 100%;
	height:200px;
	word-break: break-word; /* Ensure that long content wraps properly // To prevent images from overflowing */
	}
	.feed-link {
	color: #fff;
	text-decoration: none;
	background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );padding:5px;border-radius:5px;
	}
	.feed-link:hover {
	color: yellow;
	text-decoration: none;
	}
	option {
	font-weight: normal;
	display: block;
	white-space-collapse: collapse;
	text-wrap: nowrap;
	min-height: 2.2em!important;
	padding: 0px 2px 1px;
	}
	select#feedSelect.feed-select {font-size:2.1em!important;}
	div.text-center.mt-3 {background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );color:#fff;padding:20px;margin:20px;border-radius:10px;}
	.feed-date {
	display:none!important;
	margin-top: 10px;
	font-size: 14px;
	color: yellow;
	}

	.feed-tags {
	margin-top: 10px;
	}
	img {width:100%!important;}
	.feed-tag {
	display: inline-block;
	padding: 2px 5px;
	margin-right: 5px;
	background-color: #e9ecef;
	color: #333;
	font-size: 12px;
	border-radius: 3px;
	}
	spam.visually-hidden {color:#000}
	</style>
	</head>
	<body>
	<div class="feed-container">
	<!-- Loading Indicator -->
	<div class="text-center">
	<img src="https://storage.ning.com/topology/rest/1.0/file/get/12130907698?profile=original" alt="Loading..." class="img-fluid" style="width: 200px;">
	</div>
	</div>
	<div class="text-center mt-3">
	<label for="feedSelect" class="form-label">Select a feed from a section of the community:</label>
	<select id="feedSelect" class="form-select">
	<option value="https://landsurveyorsunited.com/articles/feed/all">Surveying Articles</option>
	<option value="https://landsurveyorsunited.com/video/feed/all">Surveying Videos</option>
	<option value="https://landsurveyorsunited.com/photo/feed/all">Surveying Photos</option>
	<option value="https://landsurveyorsunited.com/forum/topics/feed/all">Surveyor Forum</option>
	<option value="https://landsurveyorsunited.com/hubs/ai/forum/topics/feed/all">Survey</option>
	</select>
	<button id="loadFeedBtn" class="btn btn-primary mt-3">Load This Feed Above</button>
	</div>
	</div>
	<div class="container">
	<div class="feed-container">
	<!-- Loading Indicator -->
	<div class="text-center">
	<img src="https://storage.ning.com/topology/rest/1.0/file/get/12130907698?profile=original" alt="Loading..." class="img-fluid" style="width: 200px;">
	</div>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
	<script>
	// Fetch RSS feed from URL
	function fetchRssFeed(url) {
	const container = document.querySelector('.feed-container');
	container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading Articles...</span></div></div>';

	const xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
	const response = JSON.parse(xhr.responseText);
	renderFeed(response);
	}
	};
	xhr.open('GET', `https://api.rss2json.com/v1/api.json?rss_url=${url}`, true);
	xhr.send();
	}

	function renderFeed(feed) {
	const container = document.querySelector('.feed-container');
	container.innerHTML = '';

	feed.items.forEach(function(item) {
	const feedItem = document.createElement('div');
	feedItem.classList.add('feed-item');

	const title = document.createElement('div');
	title.classList.add('feed-title');
	title.textContent = item.title;
	feedItem.appendChild(title);

	const description = document.createElement('div');
	description.classList.add('feed-description');
	const parser = new DOMParser();
	const descriptionContent = parser.parseFromString(item.description, 'text/html');
	description.appendChild(descriptionContent.body);
	feedItem.appendChild(description);

	const link = document.createElement('a');
	link.classList.add('feed-link');
	link.href = item.link;
	link.textContent = 'Read More';
	feedItem.appendChild(link);

	const date = document.createElement('div');
	date.classList.add('feed-date');
	date.textContent = new Date(item.pubDate).toDateString();
	feedItem.appendChild(date);

	const tags = document.createElement('div');
	tags.classList.add('feed-tags');
	item.categories.forEach(function(tag) {
	const tagElement = document.createElement('span');
	tagElement.classList.add('feed-tag');
	tagElement.textContent = tag;
	tags.appendChild(tagElement);
	});
	feedItem.appendChild(tags);

	container.appendChild(feedItem);
	});
	}

	// Load selected feed when button is clicked
	document.getElementById('loadFeedBtn').addEventListener('click', function() {
	const feedSelect = document.getElementById('feedSelect');
	const selectedFeed = feedSelect.value;
	fetchRssFeed(selectedFeed);
	});

	// Load default feed on page load
	fetchRssFeed('https://landsurveyorsunited.com/articles/feed/all');
	</script>
	</body>
	</html>