jplanet jplanet - 1 month ago 6
CSS Question

Display text from local text file into a div? (No webserver)

I am a Twitch streamer and I am currently trying to animate any text on my stream the way I want it animated. I use a thing called stream labels, which gets the latest information from my stream, and outputs it to a folder on my pc as a .txt file.

What I am trying to do is to call upon the .txt file in a div, style it, and use the file by using OBS browsersource. I have it animated and it does display the text, but cant figure out a way to style it (the content within the object). I am terrible with JS, and I have read that you cannot call upon local files with JS. Is there anything that I could use to make this happen?

This is what I have:

<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>


<div id="element-animation">
</div>


<script>
document.getElementById('element-animation').innerHTML += '<object type="text/html" data="most_recent_follower.txt"></object>';
</script>

<script>
</script>


</body>


The problem is, using this way would be no different then just using the object tag in the html, and the object content cannot be styled.

Answer

You need to learn the basic of javascript... Specially about AJAX.

To get everything from a file into your document you need to use ajax - to use ajax you probably need a server unless some security flags is turned off.

jQuery(function($){
  $.get("most_recent_follower.txt", function(txt) {
    $('#element-animation').text(txt)
  })
})
Comments