Showing posts with label iframe. Show all posts
Showing posts with label iframe. Show all posts

Monday, 5 September 2011

JavaScript: adjust the height of an iframe according to its content

   


I know that we shouldn't use iframes, but sometimes they are useful or maybe we used them in old pages that we don't really want to completely update for iframes removal. In those cases we might need to make the iframes expand and reduce according to the content. Yet, we don't want to write much code to achieve that. That is the case when JavaScript can lend us an helping hand.

offsetHeight and scrollHeight
In order to reach our goal, we need to use different code: one for Firefox and one for all other browsers. Firefox needs to use offsetHeight which is "a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height." (quoted from MDN). For other browsers we will use scrollHeight which is "a measurement of the height of an element's content including content not visible on the screen due to overflow." (quoted from MDN).