Scrolling text-banner from a text-file

[GK5]

Hello,
I'm trying to include a scrolling (left to right) text-banner with information on my webpage.
I have used this code in the body placeholder:

<marquee direction="left" height="75" width="500" bgcolor="white">
<font color="red" face="Verdana, Geneva, sans-serif" size="+5">
Deze avond is er geen bijeenkomst wegens het slechte weer.
</font>
</marquee>

It is working very good as long as I'm using a fixed text (in this case: Deze avond.....).
But since the information is updated at least once a day I would have it in a text-file that would be used by the html-code.
In that case I only have to upload daily the text-file by fpt without changing my Xara web-file.

I've already tried it with the <object> and <div> commands but its is not working.
Since I'm only the knowledge of a beginner for html-tags, I hope someone can help me to solve this problem.

I have included a copy of my test-file so you can see what I mean.

Thanks
Frank

[Acorn]

Frank, this is fairly complicated, using a number of methods.

You created a Print document.
I changed it to a Web document.

First off, put a holding message into your current Marquee: Checking for the latest message, please be patient...
If everything is working this will never appear.
Next, add a Name/Anchor of message to the marquee Placeholder.
Somewhere on your local machine, create a text file, message.txt with a single line of: Deze avond is er geen bijeenkomst wegens het slechte weer.
Off page, create a box and Link > link to file > Browse to message.txt.
Finally, in Website > HTML Code (body) put:

<script>
async function main() {
  afile = await fetch('index_htm_files/message.txt');
  amsg = await afile.text();
  document.querySelector('#message marquee font').innerText = amsg;
}
main();
</script>

When you Preview or Publish, the code looks for message.txt.
If it finds it, it reads its contents to a JavaScript variable amsg.
It then tries to place this new message into the Marquee.

If it does not find it, it displays the holding message.

To change the message, you locate it on the server - it is in index_htm_files/message.txt.
You change it there and the page needs to be told.
I added a simple Refresh Message link for this; there are better ways.
async Fetch will not work on Export website as it does not recognise file://.

async XaraWeb-Test Banner.xar

Acorn

[GK5]

@Acorn
Thank you for your solution.
I've tried it and it works just like i wanted.
Regards
Frank

[GK5]

@Acorn
Sorry to bother you again with the scolling text problem. The sample you sent works perfectly. I did the same thing on a standalone page and it worked too.
Now I have it built into the home page of my website, the same way as you described (I think).
However, I can't get it to work. I keep getting the 'checking for the latest message' text.
In attachment you can find the home page as well as the folder with the text. Is it possible to check it once again?
Thanks
Frank

[Acorn]

@Acorn
Sorry to bother you again with the scolling text problem. The sample you sent works perfectly. I did the same thing on a standalone page and it worked too.
Now I have it built into the home page of my website, the same way as you described (I think).
However, I can't get it to work. I keep getting the 'checking for the latest message' text.
In attachment you can find the home page as well as the folder with the text. Is it possible to check it once again?
Thanks
Frank

Frank, your current code has afile = await fetch ('index_htm_files/infotekst.txt'); but the path to infotekst.txt is actually data/info/infotekst.txt.
You need be using afile = await fetch ('data/info/infotekst.txt');

Also the selector is not working as before.
Try this instead:

<script>
async function main() {
  afile = await fetch ('data/info/infotekst.txt');
  amsg = await afile.text();
  document.querySelector('marquee#message font').innerText = amsg;
}
main();
</script>

That works for me.

Acorn

[GK5]

@Acorn
The .web file has been modified, but nothing changes. The text file is still not found.

[Acorn]

Are you just Previewing or Publishing?

When you publish, is the path to the message still (website)/data/info/infotekst.txt?

Both the site and the message file must be on the server, you cannot Preview or Export locally.



Acorn

[GK5]

I am publishing.
I really don't understand what's going wrong. From your screenshot I can see that it does indeed work. But it doesn't work for me. I am attaching an example of what I get to see (web display) and also a piece of the html code.
Here you see that the correct file is being referred to (triple checked).
The same can be seen in xara itself (xaradisplay).
I really have no idea what the problem is.
Maybe I should just leave the banner out when we can't find to reason?
frank

[Acorn]

I am publishing.
I really don't understand what's going wrong. From your screenshot I can see that it does indeed work. But it doesn't work for me. I am attaching an example of what I get to see (web display) and also a piece of the html code.
Here you see that the correct file is being referred to (triple checked).
The same can be seen in xara itself (xaradisplay).
I really have no idea what the problem is.
Maybe I should just leave the banner out when we can't find to reason?
frank

Frank, as shown, you code is looking for a sub-folder, object_data, to get the text file.
As this is different to what you uploaded previously, you have to check you are publishing infotekst.txt into the http://www.fccweb.epizy.com/object_data/ folder.

UPDATE: I have checked and the file is there!
You do not need to include the full path, you just need await fetch ("object_data/infotekst.txt");

async function main() {
  afile = await fetch('object_data/infotekst.txt');
  amsg = await afile.text();
  document.querySelector('marquee#message font').innerText = amsg;
}
main();

I have just made these changes on my local server and it works fine.
Using the full URL may be hitting a CORS issue.

I also had a play and changed the marquee background;

<marquee id="message" direction="left" height="75" width="500" scrollamount="10" bgcolor="transparent">
<font color="red" face="Verdana, Geneva, sans-serif" size="+3">This is a test ---</font>
</marquee>

Here are my plays published:
The path to the message is a relative URL: object_data/infotekst.txt
http://acorn.xara.hosting/FCC/index.htm - I removed the gap after fetch
http://acorn.xara.hosting/FCC/index-a.htm - I altered the marquee background

Acorn

[GK5]

@Acorn
I assume you used my last .web file to make the changes. Your two urls work perfectly.
I made the same changes in the same .web file and also checked the correctness in the htm generated by Xara.
Unfortunately my version keeps giving the same error text.
I have created a new .web file with only the scrolling-box in it and included the same async & marquee code: same error!
So, I've decided to put this problem on hold temporarily and continue with the further finishing of the website.
Thanks for all the help and I'll keep you posted if I find a solution.
Frank