Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save landsurveyorsunited/39488e43d14eb2b2dc71abe5e1fe1fda to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/39488e43d14eb2b2dc71abe5e1fe1fda to your computer and use it in GitHub Desktop.
horizonally scrolling RSS feed
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment