jQuery Plugin For Auto Resizing iFrame - iframe Auto Height

File Size: 292 KB
Views Total: 59041
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Auto Resizing iFrame - iframe Auto Height

iframe Auto Height is a simple jQuery plugin to dynamically resize iframes based on content height. It helps you to create neat content iFrames to fit your Web typography. More examples are available in the Demo fold, check out them to see how this plugin works.

See also:

Basic Usage:

1. Include jQuery library and jQuery iframe Auto Height on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.js"></script>

2. Include jQuery Browser Plugin after jQuery library if you are using jQuery 1.9.0 and up

<script type="text/javascript" src="jquery.browser.js"></script>

3. Create a iFrame

<iframe src="photo.html" class="photo" scrolling="no" frameborder="0"></iframe>

4. Call the plugin and then done

<script>
  $('iframe.photo').iframeAutoHeight({
  minHeight: 240, // Sets the iframe height to this value if the calculated value is less
  heightOffset: 50 // Optionally add some buffer to the bottom
  });
</script>

5. set default option values

// add some buffer to the bottom
heightOffset: 0,

// set the iframe height to this value if the calculated value is less
minHeight: 0,
maxHeight: 0,

// do something with the callbackObject.newFrameHeight value
callback: function () {},

// use jquery animate with duration of 500 when resizing the iframe
animate: false,

// hard set the iframe height to the minHeight before re-sizing
resetToMinHeight: false,

// optionally define 1 or more functions that will have access to the resize method
// can be used to resize the iframe from external events such as click or window resize - see examples below
triggerFunctions: [],

// optionally re-define the height calculation method(s)
// override the default implementation or just override specific browsers
heightCalculationOverrides: []

Change logs:

v2.0.0 (2015-06-29)

  • Add chrome to strategyKeys array
  • use window.parent instead of window.top.document

2014-05-18


This awesome jQuery plugin is developed by house9. For more Advanced Usages, please check the demo page or visit the official website.