squeezeFrame.js demo page

squeezeFrame.js is a small self-contained javascript-function that tries to scale your iframe-content to fit the iframe-size, thus avoiding inaccessible content or scrollbars (cfr. 3 iframes below). And while it's there, it'll also redirect users accessing the iframe-content out of context to the correct container-page if it was specified.

  1. upload squeezeFrame.js to your webserver and include in the iframe-content page that needs fixing
  2. optionally set "myMax" with the maximum positive/negative zoom allowed, e.g. 0.25 means that the page can zoom from 75->125%. The default value is 0.05, so 95->105%
  3. optionally set "myRedraw" to "both" (default is "width") to adjust to both width and height
  4. set "myContainer" to the URL of the iframe container page (i.e. the page in which the iframe is created/ defined)
  5. example code:
    <script type="text/javascript" src="/path/to/squeezeFrame.js"></script>
    <script type="text/javascript">
    myContainer="http://url.to/container-page/";
    myMax=0.25;
    myRedraw="both";
    </script>

Example1: typical use-case where the iframe-content is a bit too wide, resulting in a horizontal scrollbar, which in turn causes the vertical scrollbar to appear

Example2: a content-frame which is both too high and too wide, both scrollbars appear, squeezeFrame by default zooms out for the width to be correct

Example3: a bit more extreme; the same iframe-content, but with scrolling=no and resizing to fit the entire content (myRedraw="both";) in the iframe:

Known bugs:

Leave a reply on the squeezeFrame-post on my blog or contact me if you encounter other bugs or problems