Javascript hoogte bepalen van een div
09-06-2009 10:01


Voor een website moest ik een script hebben dat aangaf hoe hoog een div was. Aangezien PHP op de server uitgevoerd wordt wist ik dat ik daar het antwoord niet moest zoeken. Daarom heb ik me gericht op de cliënt side taal "javascript". Daarvoor heb ik het onderstaande script gevonden en deels aangepast dat de hoogte van een opgegeven div bepaald. Dit script kan je gebruiken als je wilt weten hoe hoog de div is, om zo de lege ruimte op te vullen met bijvoorbeeld foto's. Het is wel belangrijk om te weten dat er een klein verschil in het resultaat zit tussen Internet Explorer en FireFox.

Het script:

<script language="javascript">
// Bepaal de hoogte van de div content, hiermee wordt berekend hoeveel sponsors in het Iframe getoond kunnen worden.
var hoogte = document.getElementById("content").offsetHeight;
var hoogte_iframe = hoogte + 20;
document.write("<iframe frameborder=\"0\" scrolling=\"no\" height=" + hoogte_iframe + " src=\"<?php echo $domein_naam; ?>paginas/pagina.php?hoogte=" + hoogte +"\" width=\"195\"></iframe>");
</script>

De toepassing:

In bovenstaand script laat ik de hoogte bepalen van de div genaamt "content". Daarin zit het middelste gedeelte van de website die bestaat uit alle tekst en foto's. Vervolgens laat ik het Iframe de maximale hoogte van de div aannemen. Zo wordt de website niet uitgerekt, maar dadelijk automatisch gevuld. De hoogte geef ik ook mee aan de pagina in het Iframe zodat die kan berekenen hoeveel (bijvoorbeeld) foto's er getoond kunnen worden.



.:Terug:.

Laatst bijgewerkt op: 21-03-2012
 
Gemaakt door: Tim de Hoog