Onnestuu linkit / iframe

Tiedostoon index.html seuraavat muokkaukset:

Siihen container-div:iin missä halutaan linkin sisältö näyttää lisätään iframe:
<iframe id="form-iframe" src="tervetuloa.html" onload="AdjustIframeHeightOnLoad()" style="margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no"></iframe>

eli lataa ensikertaa index.html avatessa iframeen tuon etusivun sisällön (etusivu.html)ja kutsuu javascript-funktiota,
joka vaihtaa iframen korkeuden tuon etusivun sisällön mukaan.

---------------------------------------------

Melkein filun loppuun juuri ennen </body>-tagia lisätään pari javascript-funktiota:
<script type="text/javascript">
    function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
    function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>

Nämä hoitavat iframen korkeuden muutokset fiksusti riippuen iframeen ladattavan sisällön pituudesta.

-------------------------------

Linkki uudelle sivulle (vasemmassa palkissa) tehdään seuraavasti:
<a href="#" onclick="load_tervetuloa()"><img src="images\etusivu.png" border="0"></a><br>
<script>
      function load_tervetuloa(){
window.frames["form-iframe"].src = "tervetuloa.html";
}
</script>

eli linkissä kutsutaan funktiota load_tervetuloa mikä esitellään heti tuossa linkin jälkeen ja joka vain lataa iframeen "form-iframe" tuon sivun.

----------------------------------------

Nämä muutokset kaikkiin linkki-sivuille:

Linkki-sivulla (esim etusivu.html, asuntoa.html) <body>-tagiin lisätään style="margin-top:0;"
ja body-tagien <body> </body> sisään lisätään div-tagit siten että kaikki sisältö on tämän divin sisällä:
<div id="page-container">
*sisältö*
</div>
Tämä siksi että saadaan oikea korkeus index.html-sivulla olevaan iframeen.

----------------------------------------

Aiemmin lisätyn </div>-tagin jälkeen ja ennen </body>-tagia lisätään:
<script type="text/javascript">
parent.AdjustIframeHeight(document.getElementById("page-container").scrollHeight);
</script>
Ja tässä lasketaan tuon divin korkeus.