I have been trying to build a scrolling marquee using JavaScript to add to a game stream that highlights the most recent followers, subscribers, etc. I am using StreamLabels which captures the gamertags of the most recent everything and places the data into a text file labeled for each. To start building this, I had to first make sure I could have a script that can pull the text and print the file data on the webpage. However, every Javascript code I find will not output the data on the screen.
I first tried (How to read a local text file?):
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
and added readTextFile("follower.txt"); to the webpage code. Upon execution, the page was completely blank for Chrome, IE, and Edge.
Next I tried (How do I load the contents of a text file into a javascript variable?):
var client = new XMLHttpRequest();
client.open('GET', '/follower.txt');
client.onreadystatechange = function() {
alert(client.responseText);
}
client.send();
as well as the updated 2019 code found in the comments:
fetch('follower.txt')
.then(response => response.text())
.then((data) => {
console.log(data)
})
Each ended the same as the first: with a blank screen.
Finally, I gave up on the read from text using Javascript and started looking at <marquee>, which as far as I know is an outdated and archaic way of doing it. The code I found incorporated a little Javascript for the scrolling and HTML/CSS to control the text. I also included an <object> pull the text file into the code. What I finished with was:
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script>
$(function(){
$('.marquee').marquee({
allowCss3Support: true,
css3easing: 'linear',
easing: 'linear',
delayBeforeStart: 1000,
direction: 'left',
duplicated: true,
duration: 25000,
gap: 20,
pauseOnCycle: false,
pauseOnHover: false,
startVisible: false
});
});
</script>
<style type="text/css">
.marquee span {
margin-right: 100%;
height: 30px;
}
.marquee p {
white-space:nowrap;
margin-right: 1000px;
}
</style>
</head>
<body>
<div class="marquee" height=20px>
<p>Recent follower: <object type="text/html" data="follower.txt"></object> // Recent donation: <object type="text/html" data="follower.txt"></object><p>
</div>
</body>
</html>
Now this code works, however the <object> is doing some weird things with spacing and randomly not being visible until the second object shows up on screen. Additionally, there is at least a 40 pixel spacing vertically between the Recent follower: text and the <object>, with the text being quite low compared to the text data (see image below)
.
I know there is something wrong with how I am doing each of the above codes, so any help would be greatly appreciated. My assumption is that using <object> may be the root cause of the spacing issues. I had also planned on trying to do a text conversion to add into this, but without any usable functionality, not sure how that will go.
