frameMagic.js demo page

frameMagic.js is a small self-contained javascript-function that tries to solve the issue with the 2nd (or 3rd or ...) page of iframe not showing up. This situation typically occurs if page(x) in an iframe is longer then page(x+1) and the height of the iframe is bigger then the browser's "viewport". Just check out the examples below to see what we're dealing with here ...

If you want to use frameMagic.js on your site, just do the following:

  1. download frameMagic.js and place it in a folder of your own choice on your webserver
  2. include it on the page where you need iframe-fixing like this:
<script type="text/javascript" src="/path/to/frameMagic.js" ></script>
And voila, frameMagic.js will automatically fix all your iframe-content positioning problems. If you have more then 1 iframe on your page and you want to apply frameMagic.js only to certain iframes, you can pass a list of comma-seperated iframe-id's that need fixing this way (as is done on this demo-page):
<script type="text/javascript">
var fM_conf="iFrame1,iFrame3";
</script>

Tested succesfully in:

  • firefox 3.6 on win xp
  • firefox 3.5 on linux (ubuntu 9.10)
  • chrome 4.0.249.89 on win xp
  • opera 10.10 on win xp
  • safari 4.03 on win xp
  • msie6 on win xp
  • internet explorer 8 on win xp