write external document1 to an invisible div
write external document2 to another invisible div

Dynamically creating an iframe whose height adapts to its content and writing it to a div

The text that slides into view when you click on a link at the top of this page belongs to an external document (same domain as this file). That document loads in a dynamically created iframe whose height adjusts to the height of the (iframed) external content. The iframe itself is written to an empty (hidden) div. The iframe has a close button that makes it smoothly slide up when the button is clicked on.

If the empty div has a percentage width, resizing the main window will modify the width of the iframe written to it. It will also modify its height as soon as there's not enough vertical space anymore for the entire iframed text to be displayed.

The script created for obtaining what is described above can be found here. (This script does not yet perform by itself what it should do, see below).

The lines for writing the iframes to the divs look like this (just some examples):
<a href="javascript: void(0)" onclick="include_iframe('div1','iframed.html', 'iframe1'); return false">write external document1 to an invisible div</a>
<a href="javascript: void(0)" onclick="include_iframe('div2','iframed2.html', 'iframe2'); return false" >write external document2 to another invisible div</a>
<div id="div1" style="width: 60%"></div>
<div id="div2" style="width: 30%"></div>
In these lines, iframe1 and iframe2 (third parameter of function include_iframe; the names are randomly chosen) reference the iframes that we want to keep adjusting to their content whenever the main window is resized. In order to make this work, we must add the following script to our page. It can be put everywhere, but putting it immediately before the closing body tag seems a good idea:
<script>
/* Referencing the dynamically created iframes whose height we want to always adapt to the iframe's content; here: 'iframe1' and 'iframe2' ) */
window.onresize=function()
{
resize_iframe('iframe1'), resize_iframe('iframe2')
}
</script>

Arie Molendijk, mesdomaines.nu.