8 Replies Latest reply on Oct 29, 2014 1:44 PM by JaredHague

    using data url load web viewer content to specific element

    JaredHague

      Hi

       

      Thought I would see if anybody has done this. Its kinda a webdesign question and that not my strongest place.

       

      I am using a webviewer to load a list of data using the data url. There are links in the webviewer that will preform scirpts in the fm database. The problem is when a user scrolls to a particular part in the webviewer and clicks the link the position resets. The content of the webviewer changes each time a record loads. I was wondering if there was a way to have a viewer load and scroll to element or div or something like that. Anyway I am sure its a simple question for you smart web fokes out there.

       

      Thanks

        • 1. Re: using data url load web viewer content to specific element
          user19752

          Change the script as

           

          New Window [Style:document]

          //your jobs

          Close Window [Current Window]

           

          It depends on what is your job when you should use New Window, since the webviewer in new window will be reloaded.

          • 2. Re: using data url load web viewer content to specific element
            steve_ssh

            Hello Jared,

             

            Assuming that I have understood your post well enough, there is a sample file that I posted a couple of years ago that may be of help.

             

            It incorporates a technique for scrolling the webviewer to a particular location when the webviewer first loads.

             

            The post is at:  https://fmdev.filemaker.com/message/96071

             

            Closer to the end of the thread I posted an archive of the sample file in question:

             

                  WebViewerFp7Interact_01.zip

             

             

            The idea for controlling the scroll position:

             

            The idea is that, when a list item is clicked, in addition to triggering an FMP script, there is a small bit of code in place which passes the vertical and horizontal scroll offset into FMP along with any other script param/variables.

             

            Then, when FMP reloads the webviewer, it passes these offset values back into the webviewer, and one of the first things that the webviewer does is to quickly scroll to the proper offset.

             

            The illusion created is that the list did not move.

             

             

            Some notes/caveats:

             

            1) This is an old demo, built for FMP v.11.   It has a bunch of extra code that is no longer necessary, given that we can now use the FMP URL protocol to trigger a script.  If you can grok which code you need to ignore, and what you wish to keep, you'll see that implementing this same idea in the current version of FMP should be much simpler.

             

            2) The original demo only worked on OSX (perhaps also on iOS).  I believe that by using the FMP URL protocol, it should be possible to build a simplified, cross-platform version.

             

            3) Roughly speaking, the snippets of code that you will probably want to keep and modify for your use are:

             

             

            Where FMP substitutes in the offsets:

             

            var xScrollAmount = <ScrollAmountX>;

             

            var yScrollAmount = <ScrollAmountY>;

             

             

             

            Where the webviewer scrolls into position:

             

            function scrollToLastPosition() {

             

                      if( xScrollAmount != -1 && yScrollAmount != -1 ) {

             

                  window.scrollTo( xScrollAmount, yScrollAmount );

                      }

            }

             

             

            Where the webviewer determines the offsets to send back to FM:

             

                      var xScroll = window.pageXOffset;

             

                      var yScroll = window.pageYOffset;

             

             

             

            HTH & Kind regards,

             

            -steve

             

             

             

            Addendum:

             

            pageXOffset and pageYOffset  may not work on earlier versions of IE.

             

            That said, it looks as though there are some other properties that can be queried in such a case:

             

              - document.body.scrollLeft

              - document.body.scrollTop

             

            (I have not tested these.)

             

             

             

             

             

            Message was edited by: steve_ssh

             

              - Added addendum regarding determining offset on earlier versions of IE

            • 3. Re: using data url load web viewer content to specific element
              JaredHague

              Thanks Steve

               

              That really put me on the right track!

              • 4. Re: using data url load web viewer content to specific element
                PalmDBS

                What OS and FM Version are you using.  For me, in FM 13 on Mac, the webviewer does not reload after triggering an FMP URL. 

                 

                EDIT: I take that back, the webviewer DOES reload, but maintains window position.

                 

                Steve's script is great for maintaining the position upon reload.  If, however, you are wanting to load the webviewer at a particular DIV to start with (before the user interacts with it), you can give each div a unique ID ("<div id='MyUniqueDivID'>Content</div>") and then, inside your data uri, use something like

                 

                <body onload="document.getElementById('MyUniqueDivID').scrollIntoView(true);">

                 

                Mike

                • 5. Re: using data url load web viewer content to specific element
                  JaredHague

                  in my solution there is a slight change with the html data.  A script runs and changes a filed taht is a variable used in the html.

                  • 6. Re: using data url load web viewer content to specific element
                    PalmDBS

                    THat's fine.  If you need the positioning to happen AFTER your script modified the HTML, don't run it as an onload in the BODY.  Instead just put

                     

                    document.getElementById('MyUniqueDivID').scrollIntoView(true);

                     

                    at the end of your script.

                     

                    Again this is only really if you want to load the page at a particular DIV the very first time the webviewer is loaded.  Although more complicated, Steve's results in a much metter UI experience in that the EXACT position of the window is maintained (if the link is in the middle of the webviewer when clicked, it will still be in the same place when reloaded), whereas scrollIntoView doesn't do that.  So once the user has started interacting, I suggest his method.  If you need the initial load to go to a particular div, you can add this to his method.

                    • 7. Re: using data url load web viewer content to specific element
                      PalmDBS

                      nevermind.... I understand what your saying now - you're actually loading a modified HTML file after the script is run

                      • 8. Re: using data url load web viewer content to specific element
                        JaredHague

                        this was very usefull too!!

                        using

                         

                        document.getElementById('MyUniqueDivID').scrollIntoView(true);


                        when the user returns to a layout it positions the appropriate content at the top.  There would have been no appropriate value for the position.

                        Thanks!!