Dynamic Text - Transparent and refreshed

Question

I have a website with a photo as the background. I want to place text over the top of the photo that comes from a text file that is uploaded periodically.This can be a plain text file or HTML if needed.

The text may be:

At 16:54:28 It's 19.7 degrees and we're playing Boney M - Daddy Cool

So I want this to refresh the page every, say, 30 seconds.

How do I put text from an external text file onto the page? The method needs to leave the photo as the background so iframe is no good unless there is a method that makes the frame transparent.

How do I refresh the dynamic text without refreshing the whole page? Target site under development at www.surf-radio.net sat on GoDaddy.

At 17:07:28 It's 18.3 degrees and we're playing Fatback Band - Spanish Hustle

Possible duplicate of [xmlhttprequest for local files](https://stackoverflow.com/questions/7683596/xmlhttprequest-for-local-files) — kostak, Sep 15 '17 at 05:17
I have no code I have tried, as I have no idea how to go about this. — Tony Harding, Sep 16 '17 at 05:47

score 0 · Accepted Answer · edited Sep 25 '17 at 00:23

You can use Javascript to refresh a single element in HTML:

<p id="transparenttext">Hello World!</p>
<script>document.getElementById("transparenttext").innerHTML = "New text!";</script>

To make the text transparent, you can type #transparenttext{opacity: 0.5;} in your CSS file.

And change the upper JS to:

document.getElementById("transparenttext").innerHTML = client;

To load a file you can go to this post: How do I load the contents of a text file into a javascript variable?

Dynamic Text - Transparent and refreshed

1 Answers1