Document in General :: Web publishing

JavaScript
Document (7)
Events (8)
Strings

General :: Web publishing :: JavaScript :: Document

Articles:

Adjusting the height of an IFRAME according to its content

Question:

On my page I display search results in an IFRAME. Sometimes there's only 5 rows of data, sometimes it can be 2000. I need to have the IFRAME size adjust to the number of elements. I was working with a construct like
iframe_1.height = 30 + 16 * (number_of_rows)

but this estimating formula relies on a certain font size. And it looks really wrong in Netscape or Opera.

Answer:

Why estimate if you can make an exact calculation of the document height? Take the code below which will work on Internet Explorer and various Netscape versions.

<script type="text/javascript">
 function adjustIFrameSize (iframeWindow) {
   if (iframeWindow.document.height) {
     var iframeElement = parent.document.getElementById(iframeWindow.name);
     iframeElement.style.height = iframeWindow.document.height + 'px';
     iframeElement.style.width = iframeWindow.document.width + 'px';
   }
   else if (document.all) {
     var iframeElement = parent.document.all[iframeWindow.name];
     if (iframeWindow.document.compatMode &&
         iframeWindow.document.compatMode != 'BackCompat') 
     {
       iframeElement.style.height = 
         iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
       iframeElement.style.width = 
         iframeWindow.document.documentElement.scrollWidth + 5 + 'px';
     }
     else {
       iframeElement.style.height = iframeWindow.document.body.scrollHeight + 5 + 'px';
       iframeElement.style.width = iframeWindow.document.body.scrollWidth + 5 + 'px';
     }
   }
 }
 </script>


	Search: