Javascript Code Showing

Hi there,

I’m just getting started with Xibo and I already found this community soo useful!
But I have a small problem I couldn’t find a solution for:

We need a countdown and as there is no widget for this I went ahead and embedded html + js.
It works perfectly except everytime the layout is loaded or refreshed parts of the javascript code (“var options =…”) is shown for about half a second instead of the countdown timer.

This is really annoying and I can’t use the layout like this.
Any ideas how to fix this/work around this issue?

I thought about giving the region a very long duration so it doesn’t refresh but this is creates problems in playlists and doesn’t fix the problem on loading.

I tested this only on the windows player.

Thanks in advance,
Raphael

Have you looked at the Clock Widget?

The Flip Clock has hourly, minute and daily counter options which run from a specified date/time.

This is not possible with the Digital Clock right?
Because the visuals of the Flip Clock don’t fit into my layout…

That’s right the countdown is with the Flip Clock only.

Are you saying that the look/appearance of the Flip Clock does not fit your Layout?

We welcome suggestions in our Features category for further possible developments and enhancements that would be beneficial to our users :slight_smile:

Could I ask that you provide us with an export of the Layout or a screen shot of the code that has been entered so that we can take a look for you?

Yes! I really prefer the clean and customizable look of the digital clock :slight_smile: I will have a look at the Features Category!

This is the code I use:

<p id="countdown" style="font-size: 120px;></p>

<style type="text/css">
p {
font-family: roboto light regular;
text-align: center;
color: #ffffff;
</style>

<script type="text/javascript">
    function EmbedInit()
    {
        // Init will be called when this page is loaded in the client.
// Set the date we're counting down to
    var nowDate = new Date(); 
    var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 11, 15, 0, 0);
    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get todays date and time
      var now = new Date().getTime();
     // Find the distance between now an the count down date
      var distance = countDownDate - now;

      if (distance < 1) {
        countDownDate = countDownDate.setDate(countDownDate.getDate()+1);
        distance = countDownDate - now;
      }
      
      // Time calculations for hours, minutes and seconds
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance%(1000 * 60))/ 1000);

			var time=('0'  + minutes).slice(-2)+':'+('0' + seconds).slice(-2);
     
     // Display the result
      document.getElementById("countdown").innerHTML =  time 
    }, 1000);
        return;
    }
</script>

Thank you so much for your help :slight_smile:

So that we can assist you with this we ideally need an export of the Layout so that we can identify any potential issues. If that is not possible then could you provide a screenshot of your code so that we can ensure that this has been completed in the desired location?

Thank you

I tried this yesterday but couldn’t upload the file here!
But this works :slight_smile:
https://1drv.ms/u/s!AiaSBJ0ZGOHmgYUy0RzhHOgzevmFvg

Hi,
thank you for your Javascript to build a countdown,

but it is very limited, because it can count and display only 59 minutes and 59 seconds down.

Is it possible that you supplement the scripts with a counter of hours and days ?

It is possible that i make a mistake at the configuration of the script?

Sunny greeting from Germany

Torsten

For my use I only need minutes and seconds, but have a look at this:
https://www.w3schools.com/howto/howto_js_countdown.asp

That might help you :slight_smile:

Hi Raph,

Thank you for yout hint, works perfekt for me!

To resolve your issue you need to amend the HTML to the following:

<p id="countdown" style="font-size: 120px;"></p>

as you currently have:
<p id="countdown" style="font-size: 120px;></p> with a missing "

Thank you

1 Like

Oh thank you so much! Such a stupid mistake :slight_smile: