0

Formula/Script behaves differently when in Full Screen View

Hi Ninox Forum Followers,

I have a formula/script as found below that behaves differently when in the full screen view.

The behavior resorts back to displaying the time when the full screen is reduced back to the default form view. The behavior is consistent.

Please look this over to see where I may be able to make changes.

I sent this to support, and they suggested that I put this into the forum.

thanks for looking!!

let css := "
<style>
main {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5em;
}
</style>";
let content := "
<main id='clock'></main>
<script>
function addZero(i) {
    if (i < 10) {i = '0' + i}
    return i;
}

setInterval(function() {
    let now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    let meridiem = hours >= 12 ? 'PM' : 'AM'; // Determine AM or PM

    // Convert hours to 12-hour format
    hours = hours % 12 || 12;

    let node = document.querySelector('#clock');
    node.innerHTML = addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds) + ' ' + meridiem;
}, 1000);
</script>
";
html(css + content)

10 replies

null
    • Sam.1
    • 1 yr ago
    • Reported - view

    When in the full screen view the field is blank

    • Fred
    • 1 yr ago
    • Reported - view

    To be clear, if you go full screen using the brower fullscreen (either button or menu) then it shows.

    If you use the openFullscreen() command then it disappears. Put the following code in a button on the Form view you have your clock:

    openFullScreen(this)

    Sam, were you clear with Ninox about how you got into full screen? This seems like a Ninox bug.

      • Sam.1
      • 1 yr ago
      • Reported - view

       Yes, but maybe I was not clear enough. I thought a bug as well and that's why I went there first.

      And, yes about the openFullscreen(this) function.

    • Sean
    • 1 yr ago
    • Reported - view

    I don't know if it is a bug or a design decision, but it doesn't look like you can modify the fullscreen DOM with javascript. Script appears to work though as the attached database demonstrates. Even if you try to manipulate the DOM in fullscreen mode it only affects the non-fullscreen element.

    aaaTest.ninox
      • Sean
      • 1 yr ago
      • Reported - view

       The attached db works. Pasting code on the forum has changed and really messes up the formatting.

      aaaTest.ninox
      • Sam.1
      • 1 yr ago
      • Reported - view

       Sean---thank you very much!! I can go on with my life now🙂

    • Alan_Cooke
    • 1 yr ago
    • Reported - view

    I have tried this as well using a toggle to switch between fullScreen or not.  The clock disappears when in fullscreen.  Pity about that.

      • David_H
      • 5 mths ago
      • Reported - view

       Did you ever find a solution to displaying the timer? I've tried the same thing and can't get it to work in fullscreen mode. Everything else seems to be fine including html pictures, SVG animations etc.

      • Alan_Cooke
      • 5 mths ago
      • Reported - view

       yes I did:

      let css := "
      <style>
      main {
          font-family: 'Noto Sans', sans-serif;
          font-size: 1.0em;
      }
      </style>";
      let content := "
      <main id='clock'></main>
      <script>
      function addZero(i) {
          if (i < 10) {i = '0' + i}
          return i;
      }

      setInterval(function() {
          let now = new Date();
          let hours = now.getHours();
          let minutes = now.getMinutes();
          let seconds = now.getSeconds();
          let meridiem = hours >= 12 ? 'PM' : 'AM'; // Determine AM or PM

          // Convert hours to 12-hour format
          hours = hours % 12 || 12;

          let daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
          let dayOfWeek = daysOfWeek[now.getDay()]; // Get day of the week
          let date = now.getDate(); // Get date
          let month = now.toLocaleString('default', { month: 'long' }); // Get month name
          let year = now.getFullYear(); // Get year

      const isFullscreen = document.querySelector('.fullscreeneditor');
      const node = document.querySelectorAll('#clock');

      if (isFullscreen) {
        node[1].innerHTML = `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)} ${meridiem} - ${dayOfWeek.slice(0, 3)}, ${month.slice(0, 3)} ${date}, ${year}`;
      } else {
        node[0].innerHTML = `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)} ${meridiem} - ${dayOfWeek.slice(0, 3)}, ${month.slice(0, 3)} ${date}, ${year}`;
      }
          }, 1000);
          </script>
      ";
      html(css + content)

      • David_H
      • 5 mths ago
      • Reported - view

       Wow!!!

      Works perfectly. Thank you so much!!!!

Login to reply

Content aside

  • Status Answered
  • 5 mths agoLast active
  • 10Replies
  • 95Views
  • 5 Following