© Arie Molendijk
Animated Dynamic Auto-resize Iframes

(WARNING: If you want to copy/paste from this page, don't use Internet Explorer, as copying with this browser gives unwanted results. Use Firefox or another non-IE browser!).

When I started writing this page, I had the idea of presenting its content as a tutorial on how to include animated dynamic auto-resize iframes into a page. But I soon realized that - given the complexity of the matter - this would be less useful than giving a simple set of clear enough instructions on how to do it. So here we go. The instructions serve as demos.

The scripts:
We need two scripts: one with the defer attribute and one without it. On this page, they are called animated_autoresize_iframe.js and iframe_correction.js, respectively. They must be put in the head (click on the links!):
<head>
<script src=" animated_autoresize_iframe.js "></script>
<script defer src=" iframe_correction.js "></script>
</head>

The HTML:
Suppose we want to dynamically load an external page external.html in a relatively positioned animated auto-resizing iframe. The required lines would be:
<a id='external_link1' href="javascript:void(0)" onclick="toggle_div('external_div'); load_iframe('external_frame','external.html');toggle_link('external_link1','external_link2');">Show external</a>
<a id="external_link2" style="display:none; color: gray" href="javascript: void(0)">Show external</a>
<div id="external_div" style="display: none; position: relative; width: 300px; background: transparent; left:400px">
<div style="float: right; font-family: verdana; font-size: 12px; padding: 2px; padding-left:4px; padding-right:4px; color: white; background: darkred; font-weight: bold; cursor: pointer" onclick="toggle_link('external_link2','external_link1');toggleSlide('external_frame');setTimeout('toggle_div(\'external_div\')',slide_speed);">X</div><br>
<iframe name="external_frame" id="external_frame" style="position: relative; width: 100%; background: white; z-index:10000" onload="setIframeHeight('external_frame');toggleSlide('external_frame');"></iframe>
</div>

Of course, we can modify the text of the underlined link. We could replace it with 'HERE', for instance. Demo HERE
If we want the iframe to be absolutely positioned, we replace the highlighted 'relative' with 'absolute'. The values given for 'width' and 'left' (to the right of the highlighted 'relative') are just examples.
The second underlined link is inactive; we can change its color ('gray') with something else.
We can also change the iframe's background (here: 'white'). This will only have the desired result if the external file itself has no value specified for the body-background.
Changing other styles must be done with great caution. Experiment with it.

I know the lines above look horrible. (That's what we get when we want something special). But using what is explained above on your site is less complicated than you might think. Suppose you want to load a file some_file.html in an animated dynamic auto-resize iframe. All you have to do (after creating some_file.html) is to put the example-lines above in a text editor (which can be a file having the txt-extension) and then automatically replace (edit -> replace -> replace all) all instances of external with some_file). That's all.

Before finalizing, two more demos: show lore and show dreary. The files contain links showing that the iframe adjusts its height to its content even when a new file is loaded from whithin the iframe.

Enjoy,
Arie Molendijk, classical-music.tk.