Voorkom dubbele scrollbalken (art. 2606)
Probleem: Dubbele scrollbalken bij toepassing van een inline frame
Soms ontstaan dubbele scrollbalken doordat op de website een inline frame wordt toegepast die te hoog is voor de webpagina.
Oplossing 1: zorg dat het iframe hoog genoeg is voor alle iframe pagina's
Zorg dat het iframe hoog genoeg is voor de langste pagina (bijvoorbeeld het inschrijfformulier).
Voorbeeld HTML code:
<iframe height="2500" src="http://www.tangram-tis.nl/......." ></iframe>
Oplossing 2: maak de hoogte van het inline frame dynamisch
Het is ook mogelijk om het iframe automatisch precies de juiste hoogte te geven voor elke iframe pagina.
Hiervoor zijn twee zaken nodig:
- Gebruik een eigen subdomein voor TIS: u kunt bijvoorbeeld “recruitment.uwdomein.nl” laten verwijzen naar TIS
a) U maakt in DNS een CNAME record dat “recruitment.uwdomein.nl” laat verwijzen naar “tis.tangram.nl”
b) Geef het gewenste subdomein door aan Tangram, zodat wij dat domein kunnen koppelen aan uw TIS abonnement - Laat de iframes verwijzen naar het subdomein:
<iframe src="http://recruitment.uwdomein.nl/.......” ></iframe> - Voeg onderstaande javascript toe aan uw pagina die het iframe toont, waarmee het iframe voor elke pagina die wordt geladen de hoogte dynamisch zal bepalen:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function calcHeight()
{
//find the height of the internal page
document.getElementById('the_iframe').height = 250;
var targetBody = document.getElementById('the_iframe').contentWindow.document.body;
var the_height= targetBody.scrollHeight + 100;
//change the height of the iframe
document.getElementById('the_iframe').height=the_height;
}
</script>
...
</head>
<body>
...
<iframe id="the_iframe" onload="naartop(); calcHeight()" ...
src="http://recruitment.uwdomein.nl/....... ></iframe>
...
</body>
</html>