Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

ashkcpt

New Coder
Hi all,

I need to extract data from an excel database to update a ticker tape feed on a website using coding.
What is the best way to do this? I am very new to coding so am at a total loss. The database will be held on a server.

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

Code:
<!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>
 
First of all, I want to talk about the data part of this. I'm sure you're aware that if you want to store data on a database, you'll need a piece of database software. This can be anything from MySQL, PostgreSQL, or SQLite. These are all pretty similar in their own right but yet, they may function differently from one another. Choose one and that will be the one you use. If you decide to choose another one, you'll have to set-up everything again, so just know that.

Now, I'm not a web-programming expert, but I'm pretty sure that to extract data from a database, you can't use JavaScript. I say this, as I've seen PHP code with lines trying to get things from databases. Other languages such as Python can also be used to extract the data on your website(Although, you may need to do some more work to get Python up and running on your site).

This is just some general knowledge that I've provided you with to help you get started before you continue any further. As I said, I'm not a web-programming expert so I can't really help you much more, but CF does have many web-programmers, so wait until they come along and they'll be able to help you.
 
First of all, I want to talk about the data part of this. I'm sure you're aware that if you want to store data on a database, you'll need a piece of database software. This can be anything from MySQL, PostgreSQL, or SQLite. These are all pretty similar in their own right but yet, they may function differently from one another. Choose one and that will be the one you use. If you decide to choose another one, you'll have to set-up everything again, so just know that.

Now, I'm not a web-programming expert, but I'm pretty sure that to extract data from a database, you can't use JavaScript. I say this, as I've seen PHP code with lines trying to get things from databases. Other languages such as Python can also be used to extract the data on your website(Although, you may need to do some more work to get Python up and running on your site).

This is just some general knowledge that I've provided you with to help you get started before you continue any further. As I said, I'm not a web-programming expert so I can't really help you much more, but CF does have many web-programmers, so wait until they come along and they'll be able to help you.


Hi,

Thanks so much for your reply, any advice is great. I will look into what you mentioned further.

Thanks again

Ash
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom