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.
Your a life saver futta
Hi,
Thank you for this! This is exactly what I need on this web page:
http://honku.org/lamppost.shtml
However, I can’t seem to get it to work.
Any ideas?
Thanks!
OH! I actually got it working by embedding the js in the head instead of using the external file.
Thanks!!
You are a hero, this is one of the most important inventions of the 21st century
🙂
You are a hero!! This is the only thing that has worked for me and brought my project to fruition
thanks!!
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
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%;
}