12 Replies Latest reply on Aug 21, 2012 9:14 AM by steve_ssh

    OK, it's an old question - how to center an IWP solution in the browser?

    JakKaleniuik

      Hello!

       

      I've spent ages on this at various times over the years but never managed to find the solution.

       

      I've tried embeding the IWP page in an Iframe on an HTML page and looked deep inside the IWP code to see if the whole IWP page can be wrapped in a div to center the whole thing but have always drawn a blank.

       

      Any IWP ninjas out there with any advice?

       

      Thanks!

       

      Jak

        • 1. Re: OK, it's an old question - how to center an IWP solution in the browser?
          Mike Duncan

          Every time I've tried something like this, the javascript that drives the IWP page stops working. It's easy enough to get an iframe positioned, and reference a IWP page, but then nothing works inside the iframe.

           

          --

          Mike

          • 2. Re: OK, it's an old question - how to center an IWP solution in the browser?
            Stephen Huston

            Custom Web Publishing lets you control the page structure of the site.

             

            IWP mean Instant, you take what they give you. This has been a topic for years, one FM Forum thread got edited over the course of 3 years, without new info. I don't think IWP supports this yet.

             

            But it's worth a request to FMI for this feature; after all, they decide what the IWP basic page code is, and one would think they could update this.

            • 3. Re: OK, it's an old question - how to center an IWP solution in the browser?
              steve_ssh

              Hello Jak,

               

              I'm attaching an archive of a workaround which you might consider.

               

              Essentially, it involves a technique for adding your own code (Javascript, CSS, HTML) to an IWP page.

               

              The methodology for this is essentially code injection via a hidden webviewer object on the layout.

               

              I've wrapped the technique into a custom function for easy use.  I've commented the custom function to try to make it clear what I am doing.

               

               

              Being able to do this allows for the possibility of modifying the CSS definition for the body element of the HTML.

               

              Modifying the CSS of the body element allows for the possibility of re-positioning the page content;  I believe that someone with good CSS skills would have little problem re-positioning the page content to achieve a more centered presentation.

               

               

              I've attached one demo (in both fp7 and fmp12 formats) which provides a brief example of using this technique to reposition the page content.

               

              The demo also illustrates another feature that I threw in:  background highliting for a focused input field (excluding IE versions 8 and lower).

               

              I'm running OSX 10.6.8, and did testing on the following:

               

                On OSX 10.6.8:

                          

                   - Safari 5.1.5

                   - Google Chrome 18.0.1025.168

                   - Opera 11.64

                   - Firefox 12.0

                                    

                On a Windows 7 virtual machine, courtesy of Oracle's 'Virtual Box' version 4.1.14 r77440:

                          

                   - Internet Explorer 9

               

               

               

              I would have liked to test this on IE 8 as well, but the virtual machine was just running my computer into the ground and so I gave up that ambition.

               

              I hope you enjoy.  Let me know if you have questions.

               

              Best,

               

              -steve

              • 4. Re: OK, it's an old question - how to center an IWP solution in the browser?
                JakKaleniuik

                Hi Steve,

                 

                You are an absolute LEGEND!

                 

                Your demo works brilliantly to centre an IWP page - thanks for sharing this fantastic solution - this is very high grade FileMaking - it elevates IWP to another level and will allow a way-more pro look to the apps created with it.

                 

                I'll be testing on a live server solution in next day or so and will feedback all my findings to this thread.

                 

                Truly excellent.  love it!

                 

                 

                Best, Jak

                • 5. Re: OK, it's an old question - how to center an IWP solution in the browser?
                  steve_ssh

                  Hi Jak,

                   

                  Thank you for all of your truly kind words.  I do hope it works out.  Any findings you care to share on this post would be much appreciated -- if any complications or bugs with this show up, I'd like to see if they can be addressed so that we can have this technique working really well for anyone who wishes to use it.

                   

                  Thanks and very best,

                   

                  -steve

                  • 6. Re: OK, it's an old question - how to center an IWP solution in the browser?
                    JakKaleniuik

                    Hi Steve,

                     

                    So this function is working great in all browsers except IE8  as far as I know - I get the atatched error message when the page tries to load.

                     

                    Any ideas?

                     

                    Best, Jak

                     

                    IE8_iwp_center_result.png

                    • 7. Re: OK, it's an old question - how to center an IWP solution in the browser?
                      steve_ssh

                      Hi Jak,

                       

                      Thank you for letting me know.  Even though it is a bummer, I'm glad to find out the news.

                       

                      At the time when I wrote the custom function, I wasn't able to get a virtual machine set up here to be able to test with IE 8.  Sorry about that.

                       

                      The interesting thing is that this evening I tried again in the hopes that I could see the bug in action, and for whatever reason the virtual machine now seems to behave well enough for me to test with IE8.

                       

                      I can reproduce, and I think I understand the bug, so I don't think I need to pester you for details.

                       

                      I've tried a few quick tricks to no avail, but there is one trick left which, coincidentally, occurred to me this morning as another way to approach these kind of exploits.  I think that it may work, but I'll have to see.  I have some small reservations about it, because it feels like more of a hack than the current technique used in the custom function.  I'm going to take a break for a while and let this settle down in my brain, and then I'll go back at it tonight to see what works out.

                       

                      I'll let you know as soon as I have any news.

                       

                      Sorry it's not working across the board -- and thank you for letting me know about it.

                       

                      Best,

                       

                      -steve

                      • 8. Re: OK, it's an old question - how to center an IWP solution in the browser?
                        steve_ssh

                        Hi Jak,

                         

                        I've created a new version of the custom function which appears to be compatible with IE8.  I'll attach a revised version of the demo file to this post which has the updated custom function so that you can check it out.  The revised version of the file has both the old and the new custom functions so that you can do side by side comparisons.  Please be sure to check out the points I mention in this post below -- one of them concerns the longevity/stability of this technique, and that is important.

                         

                        As always, if you have any issues or questions with how this works, please feel free to let me know.

                         

                        Very best,

                         

                        -steve

                         

                         

                         

                        Small Point:

                         

                        Whereas the original custom function achieved its result via a hidden webviewer, the new custom function achieves its result by use of defining a tooltip on a hidden text field. It's the same concept, but through a different point of entry into the IWP page.

                         

                        Important Point:

                         

                        Because of the nature of how the tooltip technique works, I'd like to stress the fact that it has the potential to break upon upgrading the version of FileMaker that you are running.  It is not certain that it will break, but the potential exists, especially since the technique is based on the exploitation of what I consider to be a bug in the IWP code (which I imagine will someday be fixed).

                         

                        I've said a little bit more about this in a post from a separate thread on this forum:

                         

                        https://fmdev.filemaker.com/message/85341#85341

                         

                        If nothing else, that post includes the list of browsers that I've tested this against.

                        • 9. Re: OK, it's an old question - how to center an IWP solution in the browser?
                          JakKaleniuik

                          Thanks Steve - I'm goinng to try this out today  - do you have a .fp7 version?

                          • 10. Re: OK, it's an old question - how to center an IWP solution in the browser?
                            steve_ssh

                            Hi Jak,

                             

                            Attached should be a FP7 version.  Sorry I didn't include it before -- I just took as guess as to which version you're working with.  I threw this version of the demo file together quickly -- seems to be fine, but let me know if you run into any issues.  The only real thing to see is how the new version is based on a text object tooltip.  Should be pretty clear.

                             

                            Best,

                             

                            -steve

                            • 11. Re: OK, it's an old question - how to center an IWP solution in the browser?
                              speckledchris

                              Hi Steve....

                               

                              Sorry to resurect an older post.  This solution you have come up with is incredible for many uses we have.  I have downloaded your test file and undersdtand what you are doing.  However, when I try to center the page using css code, it does not seem to work (text-align:center;).  Is there a certain method you have used to center the content of a FM layout in IWP?  Thanks for your response!

                               

                              Chris

                              • 12. Re: OK, it's an old question - how to center an IWP solution in the browser?
                                steve_ssh

                                Hi Chris,

                                 

                                I'll be the last person to claim any expertise with CSS, but, that said, I do have a couple of suggestions for you to try out, and I'll include them below.  If you want, you might try these out on the demo file and play with the numbers a bit to get a sense of how this will move the page content around - you can do this by entering the CSS into the long rectangular field.  I use that field as a means to have a 'sandbox' to try out various effects that CSS ond the body tag might have.

                                 

                                Please let me know if I need to clarify anything further -- I'd be happy to do so.

                                 

                                Very best,

                                 

                                -steve

                                 

                                 

                                Some Reminders/Cautions:

                                 

                                1) Please be sure to test this out in all of the browsers that you intend to support.  When I put together ideas like this, I always do my best to make them as cross-browser compatible as possible, but I've yet to get something to the point where I reach that goal:  there is always a set of broswers out there for which this won't work (hint: older IE).

                                 

                                2) This custom function certainly sets the stage for opening a lot of doors with IWP, and while I encourage experimentation, I'd advise not relying on this for mission critical features.  I don't have reservations about using this to make small tweaks to the look and feel of a page, but I wouldn't use it for much more.  The main concern that I have is compatibility with future releases of FM -- you don't want to hinge critical features on a technique that may stop working with a future FM release.

                                 

                                 

                                Some Possibilities to Play With For Centering the Body Content (I prefer the second method):

                                 

                                1) Set the left margin to a fixed number of pixels, and let the right side take up the slack:

                                 

                                Example:

                                 

                                  "margin-left:300px; margin-right:auto;"

                                 

                                 

                                2) Set all margins to 'auto', and then define a width percentage which is less than 100%:

                                 

                                  - The closer the percentage is to 100, the more your content will shift to the left.

                                 

                                  - A nice explanation for this is at:  http://bluerobot.com/web/css/center1.html

                                 

                                Example:

                                 

                                  "margin:auto; width: 65%;"