Fix iframe-positioning problem with frameMagic.js

A short followup on my previous post about iframes; as I happen to like simple drop-in solutions, I updated the javascript that handles the ‘blank 2nd page in an iframe bug’ to automagically work upon inclusion in the html.

So if you happen to have problems with the positioning of 2nd (or later) pages in iframes (due to the top part of the iframe not being visible in the ‘viewport’), just upload frameMagic.js to your webserver and add the following to the head of your html to ease your iframe-blues;

<script src="path/to/frameMagic.js"></script>

Optionally you can specify which iframes are to be treated this way (excluding the other ones) by doing

<script type="text/javascript">
var fM_conf="iFrame1,iFrame3";
</script>

You can find more information and examples on http://futtta.be/frameMagic.

7 thoughts on “Fix iframe-positioning problem with frameMagic.js

  1. Josette

    You are a hero!! This is the only thing that has worked for me and brought my project to fruition
    thanks!!

    Reply
  2. Jerri

    Hi Frank
    Well after 6 or 7 hours of looking for a fix – we have an iframe and it has two pages within the frame and the first page is longer than the second, I finally found your elegant and oh so easy fix! Brilliantly simple and does the job.
    If anybody is looking for iframe help, iframe reload page automatically (Tag!) etc this is worth a first try.
    Thank you very much for your kind contribution to the world wide web!
    Jerri

    Reply
  3. Jerri

    Found this to make it responsive

    html…

    css…
    .myIframe {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: auto;
    -webkit-overflow-scrolling:touch; //<<— THIS IS THE KEY
    border: solid black 1px;
    }
    .myIframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *