At A Glance Main Projects Tutorials Resume

Messenger


There currently is no messenger. Manually, you can contact me via:
AIM: TecGumbo

Google Talk: palen1c at gmail.com

Twitter: @Technogumbo




Amazon S3 Static Website Iframe Responsive Problems

Sun, 29 Jul 2018 21:53:51 EST

Amazon S3 has a neat and very affordable feature that allows users to host a static website from inside an S3 bucket. In 2017, I switched hosting of this website to the S3 bucket method. It reduced hosting costs per year significantly. However, there are a few catches when hosting a website out of an S3 bucket. The primary catch we will discuss today involves an iframe that is placed around content when not using the absolute URL to the Amazon bucket.

For example, this websites' absolute url within the Amazon system is: http://technogumbo.com.s3-website-us-east-1.amazonaws.com

Utilizing bucket and dns configurations, a user is able to load this content from their registered domain. When doing this, Amazon must load the content at the absolute url within an iframe.

The main website and the CSS associated with it were originally created before the iPad1 launched! It was before the responsive age we now live in. As a result; I did a few modifications when switching to the static S3 bucket configuration. However, the presence of the iFrame has been constantly breaking responsive display for this site since 2017. The resume section was created after the main site, so that has remained responsive despite the iframe.

Recently, I took the time to dig into the problem and figure out an intermediate solution. The core problem is that this website specifies an 800 pixel minimum width. There are several other features that push out to that width inside the three columns that make up the interior of the site. In modern mobile and desktop browsers, the viewport will initially scale a site with a fixed interior width like this!

With the presence of the Amazon iFrame the browser has no clue what the actual content size is and has no way to automatically scale the content.

The best solution would be to re-do the site and create a revised 2018 looking style. However, an intermediate few hour solution is this:

1. After the content loads, use Javascript to examine the device width.
2. If the device width is under our fixed width, 800px; set the scale of our body element to the desired size to be able to see most of the content inside the iframe.

Using these two steps, this will restore the nice functionality where the browser automatically scales the viewport so users can see the entire content area. This code uses jquery because it is already included in the site; but the basic Javascript DOM reference can allow you to easily select the main body. Here is the code I am using:

  function TryResizeParentFrame() {
   try {
    if(window) {
     if( $(window).width() < 800) {
      var desiredWScale = $(window).width() / 800;
      $(window.document.body).css('zoom', desiredWScale);
      $(window.document.body).css('-moz-transform-origin', '0 0');
      $(window.document.body).css('-moz-transform', "scale{" + desiredWScale + ")");
     }
    }
   } catch(e) {
    if(console) console.warn("Sorry; unable to scale parent. The viewing experience may not be optimal: " + e);
   }
  }

Charles Palen has been involved in the technology sector for several years. His formal education focused on Enterprise Database Administration. He currently works as the principal software architect and manager at Transcending Digital where he can be hired for your next contract project. Charles is a full stack developer who has been on the front lines of small business and enterprise for over 10 years. Charles current expertise covers the areas of .NET, Java, PHP, Node.js, Javascript, HTML, and CSS. Charles created Technogumbo in 2008 as a way to share lessons learned while making original products.

Comments

No one has posted any comments yet, be the first

Comments are currently disabled.