Animated Autoresizing Iframes: Code Generator
(The generator doesn't work with IE when used online (IE safety measure), so use Firefox or another non-IE browser to create the code)


If you follow the instructions below, you'll have the code needed for creating dynamic animated auto-resizing iframes on your page like this one and this one


STEP ONE:
CLICK ON THE BUTTONS BELOW (MIDDLE OF PAGE) AND ENTER YOUR VALUES
Click on the button below to specify the name of the file you want to load in an iframe.
Don't give the extension of the file
(so: my_file, not my_file.html):
Click on the button below to specify the text of the link you want to use to open / load the iframe.
(Example: view_my_file)
Click on the box below to specify the position-type of the iframe
(absolute or relative):


STEP TWO:
Click on the generator: (After a click on this button, click somewhere inside the generated code to select it, then copy the code (CTRL+c)).
Your code will show in this box. You can select the code (after having clicked on the generator first) by clicking inside the box. YOU MAY ONLY CHANGE THE STYLES INDICATED IN CAPITAL LETTERS


STEP THREE:
Put the HTML-code produced by the generator somewhere in the body of a page in which you want to show a dynamic animated auto-resizing iframe. That page could be named main.html, for instance. Note that the name of the file which loads in the iframe within main.html is the one you put in the dialogue box after hitting the name of your iframed file button above.


STEP FOUR:
In the generated code, there's a line having something like <div class="close_button" onclick="kill_iframe('bla_frame','bla_div')">X</div><br>. You may remove that line if you want, as the text-link used to display the iframe can also be used to 'kill' it (toggle).
You may also want to keep the line and, at the same time, remove the toggling-property of the text-link. In that case, remove the 'else part' in the first line of the code.


STEP FIVE:
You're not done yet. You have to put two external scripts and one external stylesheet in the head of main.html to make things work. Click on the links to see what must be put inside these files:
<link href="animated_autoresize_iframe_styles.css" rel="stylesheet" type="text/css">
<script src="animated_autoresize_iframe.js"></script>
<script defer src="iframe_correction.js"></script>



Enjoy,
© Arie Molendijk - classical-music.tk