Kaali Global Limited
| Hands on| Login| Register|
Search this site
Email us on admin 'at' kaali.co.uk if you need hosting space or a website at a very reasonable price. Kaali Web Engine is a web based content management system to manage website content, images, look & feel and more.
Authentic Silver Jewellery
Cross bowser iframe auto-resize script

A useful script to automatically resize an iframe (height and width) to fit contents in. No scrollbars ever again!! I use this to display a DHTML site tree inside an iframe. The height of the iframe is dynamically set to contain the tree contents without displaying the vertical scrollbars.


This is a cross browser script and I have tested it in IE, Netscape (Mozilla), Opera and others that I could get my friends to help me out with.

To test this script create an html page, something like:

<html>

Cross bowser iframe auto-resize script

<script type="text/javascript">
function autoIframe(frameId){
try{
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err){
window.status = err.message;
}
}
</script>



<iframe id="tree" name="tree" src="tree.htm" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>



Call it iframe.htm or anything else that you want. Also create an html page called tree.htm or any other page that you want to display in the iframe. Make sure that the iframe.htm and the tree.htm are in the same domain.

Now point your browser to http://yourdomain/iframe.htm and see the magic yourself!!

Was this article helpful? Please leave your feedback. It will help us improve and serve our customers better.
Hands on...
Author: Kaali, last update: 17th Sep 2005
Print this page
| Hands on | Site map |
Visa Master Card Discover American express eCheck
© 2005 - 2007 Kaali. All rights reserved.