How do I automatically update a ticker tape feed on a website using coding?

Hi all,

I need to extract data from an excel database to update a ticker tape feed on a website using coding. Does anyone know how to do this?

Here is the coding for the website so far. I want to update the ticker tape feed at the bottom.

<!DOCTYPE html>
<html>
<head>
<title>Palace Hotel Dragonlink Winners</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#DragonVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -1
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

img {
  display: block;
  Left: 0;
  padding: 30px 0;
  }

.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
        position: absolute;
        top: 50%;
        right: 0px;
        width: 300px;
        transform: translate(-5%, -50%) }

/* Fading animation */
.fade {
	animation: fade 1.5s;
}
@keyframes fade {
 	from {opacity: .4}
	to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


</style>
</head>
<body>
<video autoplay muted loop id="DragonVideo">
  <source src="dragonlink.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Palace Hotel Latest Winners</h1>
<marquee scrollamount="10"
direction="left"
behavior="scroll">
  <p>26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36
26.01.20	$25623.36   
26.01.20	$25623.36</p>
</marquee>
  </div>

<img src="images/Logo white.png" alt="logo" style="width:25%"/>

<div class="slideshow-container">

<div class="mySlides fade">
  <img src="images/Advert1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="images/Advert2.jpg" style="width:100%">
</div>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>


<script>
var video = document.getElementById("myVideo");
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

</script>

</body>
</html>

Thanks

Ash

Not the answer to your question, but you might want to rethink your use of the <marquee> tag, as it is obsolete.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements

1 Like

Where does the excel ‘database’ (spreadsheet) exist? On the website user’s computer, on the web server , or some other server which the browser can access?

The first of those answers is going to run into the Browser Security Wall.

Thanks for the heads up. I’ll definitely look at this as there’s no point in having obsolete coding :slight_smile:

Hi,

It will sit on a web server that is connected to the website.