Euroland IFrame Auto Height Adjuster Tutorial

The Euroland IFrame Auto Height solution allows you to integrate the Euroland IFrame based tools in a manner that the height is automatically adjusted based on the tool's own height, removing the need to set a static height, that is high enough to allow for all of the content.

Limitations

The solution is IE8+ compadible and requires you to add in a small JavaScript script into your page in order to be able to change the height of the IFRAME. This does not mean that you can't use the tool in legacy browsers, it just means you need to set up the IFRAME like you normally do, but for newer browsers the height is automatically controlled.

In terms of how many tools can you have on one page, there is no limitation, you can use as many tools on the same page as needed and the script will work just the same.

Set-Up

HTML Syntax

The HTML syntax for the IFRAME is the same as always, you simply add in the IFRAME to the site were you need it.

Note how we still need to set the height, width, scrolling and frameborder of the IFRAME in order to use the tool. Strictly speaking you do not actually need to set them, but the auto height adjuster does not remove the need to properly set up the IFRAME, it only controls the dimensions of the tool. Although the auto height adjuster does take care of the dimensions of the IFRAME automatically, the width and height attributes are required so the tool will look good in older IEs as well i.e. in IE7 if you support it. If your site does not support legacy browsers, then you can simply omit the width and the height and the auto height adjuster will take care of the dimensions.

This means that the following syntax is also valid, but only if you do not care for legacy browsers:

However even when omitting the width and the height attributes, do note how the frameborder and scrolling attributes are still required. This is because the solution does not change anything visually on the IFRAME and the total styling of the IFRAME is left up to the webmasters.

JavaScript Syntax

First of all you need to embed the EurolandToolsIntegrationObject into the site with the following script:

You should note that you can use both the HTTP and HTTPS protocols.

Once the script has been embedded you simply need to call the EurolandToolsIntegrationObject once the IFRAME is visible in the DOM Tree.

Calling the EurolandToolsIntegrationObject with jQuery

If your site uses jQuery, then activating the EurolandToolsIntegrationObject is fairly easy. We have added the following method to jQuery EurolandIFrameAutoHeight so the only thing you need to do is to only add in this script:

		$(document).ready(function() {			
			$('iframe').EurolandIFrameAutoHeight();
		});
	

As you can see, we are simply selecting all of the iframes on the page and calling the EurolandIFrameAutoHeight method. This is all that is needed in order to activate the auto height adjuster. You sould also note, that if you are using any other IFRAMEs on the site than Euroland tools, then it would be wise to select only the Euroland tools and not via a generic tag. You can still call it like that, but the auto height adjuster will only function with Euroland tools.

Calling the EurolandToolsIntegrationObject with Native JavaScript

The vanilla script way of calling the EurolandToolsIntegrationObject is more or less the same. Once the tool IFRAMEs are loaded in the DOM Tree you simply need to call this method:

		EurolandToolIntegrationObject.set(iFrameID);
		EurolandToolIntegrationObject.set(iFrameDOM);
	

The [EurolandToolIntegrationObject].set() method accepts two types of input, aider the ID of the IFRAME in question i.e. the IFRAME with holds the tool and you want to have the auto height adjust or the actual DOM Element of the tool's IFRAME.

Example

Here are two basic examples of how to use the auto height adjuster in both jQuery and normal JavaScript. You should note that in both cases we are embedding the script in the body of the HTML page, but that is not a requirement. The only thing that is required is that the EurolandToolIntegrationObject is called only after the tools' IFRAMES are visible in the DOM Tree.

jQuery

Native JavaScript