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

General Web Dev
1

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

2

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
3

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.

4

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

5

Hi,

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

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.