Countdown Clock

[Keith]

I would really like to create a large Countdown Clock.  Something like:

3 Years 7 Months 3 Days 4 Hours and 27 Seconds

with the time changing in real time - just like the 'Session expires in HH SS'  I'd like it to be triggered by a Menu Item 'Countdown Clock'.

Can this be done easily?

Keith

[Bruce]

It's easy to do, but it's all done in JavaScript.
(I suggest making a custom javascript file of your own)
see here for an example;
https://www.w3schools.com/howto/howto_js_countdown.asp

If I remember I'll show integrating this into a page in this weeks user group webinar (tomorrow.)

cheers
Bruce

[Keith]

Bruce

Excellent, thanks.

Keith

[Keith]

PS  Looking at the JS option opens a new Nettalk world.  Very good.  I'll look forward to the seminar to learn how to integrate the JS file.

Also, the graphs all work well now including Pies.

Keith

[Keith]

Hi Bruce, thanks for the great explanation in the Webinar.  I have done everything per your tutorial but am stumbling over one thing.

I created Keith.js which contains the function keithscountdowntimer with the pId and Date parameters and this looks to me to be identical with what you created.

I added a Display field to the Form that I want the timer on and added Keith.js to the Webserver/Settings/Scripts (I unticked 'Included in ALL.js  (but I have tried it with this ticked))

The piece I'm not understanding is the line in the procedure that runs the function.  I ran the program and 'Inspected' the Form to find the code for the timetogo field and I found this:

<tr id="timetogo_row">  etc which didn't look like your "updateproducts_timetogo_value_div"

So I was trying to construct the command to put in the value::timetogo routine and I tried a number of times based on <tr id="timetogo_row">  but always got the red message "Error in Site Java Script.  I ended up with what I thought would be my equivalent of what you got running i.e. p_web.Script('keithscountdown("Selection_timetogo_value_div","Sep 5, 2018 15:37:25")')   because my Form procedure is 'Selection'

With this in place the Java Script error message is no longer produced but the page is not created properly and the timer does not display.  I am pretty sure that Keith.js is correct and think that it must be that this line is wrong.

Thanks for your assistance (again!)

Keith

[Keith]

Hi
I have attached a document which describes everything in the application - the JavaScript function, the field on the Form, the p_web.script to run the function and the html available out of the Firefox Inspect facility.  The fields on the Form are an Insight graph and underneath, TimeToGo

Thanks for any suggestions

Keith

[Richard I]

Hi Keith,

I have the Countdown working in a simple login  NT example..
can send it to you if you haven't sorted it.

Cheers
Richard

[Richard I]

hi ,
 Further to the posting by Keith on the Count down javascript as presented by Bruce in a recent webinar.
I have  it working on the Alias form in the NT example web3
However, I cannot get the same routine to run on the MailboxesFormControl - it seems the point of difference between the two forms, is that the latter is a mult tab form.
In both Forms, I have added the display timeToGo to the general tab.
Presumably its something to do with the pathname of the form tab but I cant work it out
Error message from browser console is:
Uncaught TypeError: Cannot set property 'innerHTML' of null   at keith,js;22

This is a very useful option to have in applications that have a licence expiry date, so knowing how to implement it  easily  would be good.

Many Thanks
Richard

[Keith]

And yet a further point to Richard's above - when the script execute line is inserted into the procedure viz. p_web.Script('keithscountdown("selection_timetogo_value_div" ,"Sep 5, 2018 15:37:25")') the tab of the form gets munged (i.e. it doesn't display properly).  Instead of the usual tab enclosure with its name 'Graphical Summaries' it gets displayed  as '<bullet point> Graphical Summaries'

Richard, does this happen to either of your cases - the one that works and the one that doesn't.

Keith

[bshields]

Hi Keith,

When that happens it means there is a javascript error (or invalid XHTML within an ajax request - which amounts to the same thing).

Check your browser console and you'll see an error.

When javascript bumps into an error, it tends to give up on everything. Which means the javascript that formats the tabs, does not run and so they look "broken".

You might need to add ; to the end of:

p_web.Script('keithscountdown("selection_timetogo_value_div" ,"Sep 5, 2018 15:37:25");')

I'm not sure if p_web.Script does this for you but JS tends to require it.

Regards
Bill

[Keith]

Thanks Bill.

In the Console there is an error: ReferenceError: keithscountdown is not defined

keithscountdown is the JS function and I have copied it in full at the bottom of this post. I have included Keiths.js in the scripts list of the Web Server. I added the ;but still got the error.

Can you spot what is wrong from a JS perspective.  Of course the other question (which started all this) is have I got the p_web.script line correct?

Keiths.js
function keithscountdown(pId,pDate){
    // Set the date we're counting down to
    var countDownDate = new Date(pDate).getTime();//"Sep 5, 2018 15:37:25"
   
    // 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;
   
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
   
      // Display the result in the element with id="demo"
      document.getElementById(pId).innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
   
      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById(pId).innerHTML = "EXPIRED";
      }
    }, 1000);
}

[bshields]

Hi Keith,

From a quick check the spelling and case of keithscountdown is the same in the script file as it is in p_web.Script command.

So that pretty much means either Keiths.js in not being included, or its included after you are trying to use it.

1. Check that a line like this exists in your page:

<script src="/scripts/keiths.js" type="text/javascript"></script>

View the source in your browser look for it there.

2. If its not there, add keiths.js as a script file in main NetTalk proc extension template. If you have already added it make sure you untick the "Included in ALL.JS" unless you remember putting it in there.

3. If it is there, use your browser "Inspect | Network" to verify that Keiths.js was found and loaded. If you have put it in the wrong place you'll see a red 404 in the network panel.

4. If it is there, but at the bottom of the page not the top (which is now the convention), your attempt to call it, before it is loaded will fail. I'm pretty sure NetTalk still loads scripts at the top, so this shouldn't be the issue.

Regards
Bill

[Keith]

Hi Bill

In my page there is this line near the top:

<script src="/scripts/Keiths.js?c=1" type="text/javascript"></script>

Looking at Network I see that Keiths.js is loaded immediately after All.js but its Status was '304 Not Modified' whereas All.js had a status of '200 Cached'.  It is the last item (the other four are: document, stylesheet, stylesheet, script (all.js)

I'm obviously going to have to learn what all of this means but in the meantime does this look right or wrong?

Thanks

Keith

[bshields]

Hi Keith,

304 just means the browser checked with your server and realised it already had a copy of Keiths.js that matched the one on the server. So it didn't bother to download it. It just used its local cached copy.

Maybe the best approach is to copy the all "view-source" as a html document and post it here. Then I can read it and see what is wrong. I'll also need a copy of keiths.js. Or put the site public and tell me the page to look at.

Regards
Bill

[Keith]

Ok Bill.

I'll put the latest version up on a server you can get to and you'll be able to see everything.  Hope to do that tomorrow - I got an Administrator Password error when I just tried so need to sort that out.

Cheers

Keith