1 2 3 4 Previous Next 54 Replies Latest reply on Apr 17, 2017 1:12 PM by JackRodges

    Javascript clock

    thehalpeen

      I inserted a webviewer on my page to display the time. I used code from W3 Schools (see below).

       

      The time displays very nicely on my Filemaker file, which is on the Desktop.

       

      However when I open the same file on my iPad (I'm sharing it from my desktop), the time is blank and underneath is the following message:

      "The requested URL was not found on this server"

       

      Is this because the file is on a desktop and not a server - and Filemaker Go not able to handle Javascript  - if the file is being read from a Desktop

       

      The code is as follows:

      <!DOCTYPE html>

       

      <html>

      <head>

      <script>

      function startTime() {

          var today = new Date();

          var h = today.getHours();

          var m = today.getMinutes();

          var s = today.getSeconds();

          m = checkTime(m);

          s = checkTime(s);

          document.getElementById('txt').innerHTML =

          h + ":" + m + ":" + s;

          var t = setTimeout(startTime, 500);

      }

      function checkTime(i) {

          if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10

          return i;

      }

      </script>

      </head>

       

       

      <body onload="startTime()">

       

       

      <div id="txt"></div>

       

       

      </body>

      </html>

        • 1. Re: Javascript clock
          sam_oda

          Hi, where did you put( export ) the html file? Your desktop? Temporary path?

          • 2. Re: Javascript clock
            thehalpeen

            The html code in in a field called 'code'.  've created a custom web address in the Web Viewer that reads the code from the 'code' field. The Web Viewer then renders the html code based on the contents of the 'code' field.

            • 3. Re: Javascript clock
              jbrown

              Hi there.

              That should work. I copied your code into a field, pointed the web viewer to the field and then shared it to my iPad. The date shows up just fine when I share the file from my desktop to the iPad over my network

               

              I read some questions about the new date() function not being supported well on iOS devices. But that isn't happening here.

               

              Here's my file for you to test.

              1 of 1 people found this helpful
              • 4. Re: Javascript clock
                RubenVanDenBoogaard

                You can even put all in the web viewer if you put a \ in front of "'s.  Copy the following tekst in the web viewer and it should work:

                 

                "data:text/html,

                <!DOCTYPE html>

                 

                <html>

                <head>

                <script>

                function startTime() {

                    var today = new Date();

                    var h = today.getHours();

                    var m = today.getMinutes();

                    var s = today.getSeconds();

                    m = checkTime(m);

                    s = checkTime(s);

                    document.getElementById('txt').innerHTML =

                    h + \":\" + m + \":\" + s;

                    var t = setTimeout(startTime, 500);

                }

                function checkTime(i) {

                    if (i < 10) {i = \"0\" + i};  // add zero in front of numbers < 10

                    return i;

                }

                </script>

                </head>

                 

                 

                <body onload=\"startTime()\">

                 

                 

                <div id=\"txt\"></div>

                 

                 

                </body>

                </html>"

                • 5. Re: Javascript clock
                  erolst

                  Ruben van den Boogaard wrote:

                  You can even put all in the web viewer if you put a \ in front of "'s.

                  ... or simply use a single quote (like in the line above) - JavaScript accepts both variants, and for the FileMaker parser a single quote does not represent a special character.

                  • 6. Re: Javascript clock
                    beverly

                    true and sometimes it's the spacing. if the code gets "optimized" (removing returns), it may push things together that should not. this code seems to have sufficient delimiters, but it's worth checking to be sure.

                     

                    beverly

                    • 7. Re: Javascript clock
                      user19752

                      So there is attention that "don't use // comment in web viewer source"

                      2 of 2 people found this helpful
                      • 8. Re: Javascript clock
                        taylorsharpe

                        I've done this for about a dozen clients on their main navigation dashboard.  Often I have to play with fonts and colors to get it to go well with the theme.  But that just means working out the CSS.  For example, this is what I put in the web viewer of my last client:

                         

                        "data:text/html,

                        <head>

                        <script language='javascript' type='text/javascript'>

                        function timeStamp() {

                        document.getElementById('TS').innerHTML=(new Date).toLocaleString();

                        setTimeout('timeStamp()', 1000);

                        }

                        </script>

                        </head>

                        <body style='background-color: FFFFFF'; onload='timeStamp()'>

                        <div id='TS' style='color: 0E2A52; text-align:center; font:bold 10px Arial, sans-serif;'></div>

                        </body>"

                        • 9. Re: Javascript clock
                          schamblee

                          Add the following to your html

                           

                          <meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no' />

                           

                          I have tested on my iPhone 7 and it works correctly.   

                           

                          Here is a sample database Dropbox - ClockSample.fmp12

                          • 10. Re: Javascript clock
                            thehalpeen

                            Schamblee,

                             

                            Nice solution. In fact all the solutions offered worked.

                            • 11. Re: Javascript clock
                              thehalpeen

                              Taylor, I like the inclusion of the date along with the time. I'm familiar with HTML and the <br> tag. I'm just wondering how can you get the 'time' onto the next line (underneath the date) using Javascript?

                              • 12. Re: Javascript clock
                                David Moyer

                                Jeremy, et al,

                                I'm not new to Java, but I'm new to JavaScript (and its use in FM).  Where does

                                "data:text/html," & ...

                                come from?  Thanks in advance.

                                • 13. Re: Javascript clock
                                  jbrown

                                  Hi.

                                  I've no idea of what it is called or anything, but it is the text you place before typical HTML code in a web viewer to get the web viewer object to understand it should render the code below as an HTML page.

                                   

                                  That's my unofficial explanation.☺

                                   

                                  I've studied a lot of the web viewer and just now accept the syntax needed without fully understanding it.

                                   

                                  by the way, if you're interested in learning more about the web viewer, Soliant Consulting has a great series of posts about the web viewer. There are 5 more posts and a web-viewer integrations library to be added to the list as well, this afternoon. Read through those. Some amazing colleagues and myself have written a lot about it.

                                  2 of 2 people found this helpful
                                  • 14. Re: Javascript clock
                                    erolst

                                    David Moyer wrote:

                                    Where does

                                    "data:text/html," & ...

                                    come from?

                                    From the Data URI scheme.

                                    1 of 1 people found this helpful
                                    1 2 3 4 Previous Next