lo-ga-rie words, lines .. life

Iframes die meegroeien met de content / font-size

Stel je maakt een site met een iframe waarvan de content d.m.v. zoom buttons kan veranderd worden.
Men neme:

1. buttons om de font-size aan te passen
2. een iframe met content
3. een paar regels script

Om initieel de iframe de juiste hoogte te geven kan je het volgende gebruiken

$('iframe').load(function(){
  this.style.height =
  this.contentWindow.document.body.offsetHeight + 30 + 'px';
});

De 30 extra px is voor webkit browsers.
Als je de font-size knopjes indrukt dan kan je in je click event de volgende code gebruiken om iframe mee te laten scalen:

var iframeDoc = $("iframe").contents();
iframeDoc.find("body").attr("class", $(this).attr("class")); // $(this) is de font-size knop met een class 'normal' of 'big' of 'bigger'
$("#myContent").css("height", iframeDoc.find("body").height() + 30);

Dit werkt goed als je de CSS zo opbouwd dat alle font-sizes em based zijn dan kan je via

body.normal {
  font-size: 100%;
}
body.big {
  font-size: 120%;
}
body.bigger {
  font-size: 140%;
}

De font-size van het document en de iframe in 1x aanpassen.