I'm attempting to set up a simple way for a non-tech-savvy person to update a marquee ticker that will appear on a website that would be published to our BrightSign display system. I was think that they could easily type what they want into a text file, save it, and "republish" the website to our display system. All the files (index.html, style.css, tickerText.txt) would be saved locally on a computer for the person in charge to edit the marquee.
Everything works well when I type in the text between my marquee tags, but when I attempt to pull in the info from a text file, it scrolls across with a large amount of "white space" and not as long text. The below script shows when it comes out correctly (shown in picture link -- wouldn't let me embed).
<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
<div class="w3-container ocacity75"">
<div class="w3-card-4 w3-white w3-round ticker">
<marquee>This is a test and so is this</marquee>
</div>
</div>
</div>
The below script is when I try to populate the marquee from a text file and then messes up my formatting (shown in picture -- wouldn't let me embed).
<!-- Bottom Marquee Ticker -->
<div class="3-row-padding w3-center">
<div class="w3-container ocacity75"">
<div class="w3-card-4 w3-white w3-round ticker">
<marquee><object type="text/html" data="./TickerText.txt"></object></marquee>
</div>
</div>
</div>
I even tried adding in-line styling to the object tag to try to make the marquee not so large and to increase the text size, but nothing seems to work. I may be going about this wrong with trying to read in a text file. I tried some JavaScript, but I couldn't get it to work and though just a marquee tag would do just fine. Any help would be a appreciated.
To confirm, I did not use AJAX as the website doesn't show its changes on the display system until we hit the publish button again. So live updates to the website without refreshing would be overkill.
Well, you could try this:
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function() {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function(e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});#styleTest {
color: green;
}<input type="file" id="myFile">
<div id="styleTest">
<div id="output"></div>
</div>This will work for what you want, also the data in the text file would be able to be formated if needed.
As said in the comment by A Haworth,
The <marquee></marquee> tag is now deprecated.
Also, you could bypass even having a text file by doing this:
(Note: this one is better suited to your needs, for now.)
var input = document.getElementById("input");
var output = document.getElementById("output");
var txtInSub = document.getElementById("txtInSub");
function addData() {
output.innerHTML = input.value;
}
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
e = e || window.event;
var key = e.which || e.keyCode;
// key == "13" is the enter key
if (key == "13") {
txtInSub.click();
console.log({keyPressed: "Enter", functionExecution: "Submitted the Text Input Field", contentPosted: input.value});
}
}#styleTest {
color: green;
}
#inSubFld {
text-align: center;
width: 98.22%;
position: absolute;
left: 0;
top: 60px;
}
#input {
width: 100%;
padding: 10px;
display: block;
}
#txtInSub {
display: none;
}<div id="styleTest">
<div id="output"></div>
</div>
<div id="inSubFld">
<input id="input" type="text" autofocus> <!-- with autofocus it should force it so that you could type in the input field without needing to click it -->
<button id="txtInSub" onclick="addData()">Submit</button>
<p>Press Enter to Submit the content in the field above.</p>
</div>