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.

JavaScript Creation of a virtual notice-board

Millainthesky

New Coder
Hello everyone,
I try to create a vistual notice-board with javascript code.
So I use the funstion setTimeout to change the page every certain time, but my script it only works with local files such as images.jpeg
I state that I have recently been studying programming language so I am totally inexperienced, but I ask you if you think it is possible to alternate between an image and an online (interactive) Power BI dashboard every set of time.
I am inserting the test I did to alternate two colored pages (the files are saved in HTML).
Thanks for the help!!!

HTML:
PAGE 1

<!DOCTYPE html>
<html>
<body bgcolor="red">
<h1>Test 2</h1>
<h2>change in 5 seconds</h2>

<script>
    const myTimeout = setTimeout(changePage, 5000);
   
    function changePage() {
        var newLocation = "test_1.html";
        window.location = newLocation;
    }
    </script>
</body>
</html>

HTML:
PAGE 2

<!DOCTYPE html>
<html>
<body bgcolor="yellow">
<h1>Test 1</h1>
<h2>change in 5 seconds</h2>

<script>
    const myTimeout = setTimeout(changePage, 5000);
   
    function changePage() {
        var newLocation = "test_2.html";
        window.location = newLocation;
    }
    </script>
</body>
</html>
 
Last edited by a moderator:
Solution
Use the "style" tag, not the inline version, in the head to style your html.
End every javascript command with a semicolon.
MOST Importantly setTimeout() executes only once. Use setInterval() when you want it to repeat.

Because you placed the time control in the function - the function will never be called and never work.

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Time Function Execution</title>
    <!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
    <style>
#color{
    width: 150px;
    border:solid 1px black;
    text-align: center;
    padding: 150px;
    color: white;
    text-shadow: 2px 2px 4px black;
    font-size: 50px;
    font-weight: bold;
}
</style>
</head>

<body>...
I' not familiar with javascript but, maybe you can take this approach. I'm sure javascript has a way of making a list to rotate through using just one function call instead of writing a function for each.

JavaScript:
<!doctype html>
<html>
  <head>
    <title>
      Play Page
    </title>
    <style>
      #backgrounds{
        width: 500px;
        height: 500px;
        border: solid 1px black;
        background-color: lightgray;
      }
    </style>

  </head>
  <body>
    <div id='backgrounds'>
    </div>
    <script>
      // function for color1
      function color1() {
        // Get the current element which is backgrounds in the example
        var currDiv = document.getElementById('backgrounds')
        // Set the color
        currDiv.style.backgroundColor = 'green'
        // Set timeout for change
        setTimeout(color2, 5000)
      }

      // Function for color2, same as above just change the color
      function color2() {
        var currDiv = document.getElementById('backgrounds')
        currDiv.style.backgroundColor = 'yellow'
        setTimeout(color1, 5000)
      }

      // Inital call to get things started
      setTimeout(color2, 5000)
    </script>
  </body>
</html>
 
An example using a list

JavaScript:
<script>
  // Create a list of colors
  var colors = ['red', 'blue', 'orange', 'pink', 'gray', 'green', 'purple']

  // Setting a counter to rotate through the colors list
  var counter = 0

  // Create the function
  function count() {

  // If the counter is greater than or equal to the list length reset to 0 and start again
  if (counter  >= colors.length) {
    counter = 0
  }

  // Set a variable for the div id
  var div_color = document.getElementById('color')

  // Sets the text in the div
  document.getElementById('color').innerHTML = colors[counter]

  // Sets the background color for the div
  div_color.style.backgroundColor = colors[counter]

  // Increase the counter by 1 every time the function is called
  counter = counter + 1;

  // Set the timeout for  three seconds
  setTimeout(count, 3000);
  }
</script>

The html page
HTML:
/* Load the function call when page opens*/

<body onload="count()">


  /* Styling the div*/

  <div id='color' style = 'width: 150px; border:solid 1px black;

  text-align: center; padding: 150px; color: white; text-shadow: 2px 2px 4px black; font-size: 50px;

  font-weight: bold;'>

  </div>

</body>
 
Use the "style" tag, not the inline version, in the head to style your html.
End every javascript command with a semicolon.
MOST Importantly setTimeout() executes only once. Use setInterval() when you want it to repeat.

Because you placed the time control in the function - the function will never be called and never work.

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Time Function Execution</title>
    <!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
    <style>
#color{
    width: 150px;
    border:solid 1px black;
    text-align: center;
    padding: 150px;
    color: white;
    text-shadow: 2px 2px 4px black;
    font-size: 50px;
    font-weight: bold;
}
</style>
</head>

<body>
    <div id='color'></div>

<script>
var colors = ['red', 'blue', 'orange', 'pink', 'gray', 'green', 'purple'];
var counter = 0;
var div_color = document.getElementById('color')
setInterval(count, 3000);
function count() {
    if (counter  >= colors.length) {counter = 0}
    div_color.innerHTML = colors[counter];
    div_color.style.backgroundColor = colors[counter];
    ++counter;
}
</script>
</body>
</html>
 
Solution
Thank you for your help!
But I think that the PowerBi dashboard doesn't work because is linked at other web pages.
So when I save the page in html format and I insert this in the script, the fuction firstly found the page but after a while is written page not found.
I will try to do other tests with your suggestions hoping to link the web page ...
 
It works on mine. The function is called the first time in the <body onload="count()";>. After that the function calls itself.
But as I said I am not really familiar with javascript. I do like your way better. For the css being inline, it was just a quit way for me too style. If I was doing a webpage it would be an external file.
 
I used the "iframe" function to insert the web link and now everything works perfectly!
I hope you don't mind me chiming in, but please be careful when using iframe! I remember a while ago reading tips advising against using iframe because of security issues - I don't remember the page I read that on, but I think the top reply here on this SO post does a good job of explaining some of iframe's issues.

They're handy, but just make sure you program them right.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom