Tangram software voor werving en selectie, executive search, interim management, detachering, management development en interne mobiliteit

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:

  1. 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
  2. Laat de iframes verwijzen naar het subdomein:
    <iframe src="http://recruitment.uwdomein.nl/.......” ></iframe>
  3. 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>




Veel gebruikte zoektermen: