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 type="text/javascript" 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. 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
  2. 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 to Josette Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.