© Arie Molendijk
(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!)
Animated Dynamic Auto-resize Iframes
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.
We need two scripts: one with the defer attribute and one without it. On this page, they are called animated_autoresize_iframe.js
, respectively. They must be put in the head (click on the links!
<script defer src="
Suppose we want to dynamically load an external page external.html
in a relatively
positioned animated auto-resizing iframe. The required lines would be:
<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>
Of course, we can modify the text of the underlined link. We could replace it with 'HERE', for instance. Demo
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
). That's all.
Before finalizing, two more demos:
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.
Arie Molendijk, classical-music.tk.