Web Tool Bag  
Home · Articles · Downloads · Discussion Forum · Web Links · News Categories · Synonyms DatabaseJuly 15 2024 00:05:31
Discussion Forum
Web Links
News Categories
Synonyms Database
Users Online
Guests Online: 1
No Members Online

Registered Members: 856
Unactivated Members: 118
Newest Member: lakim
Forum Threads
Newest Threads
Error: Cannot find m...
Uncaught Error: _reg...
Module build failed:...
mochi script questions
Hottest Threads
Installation [12]
Any questions and... [5]
Captcha picture d... [4]
Integrate with Vi... [4]
Mods: Sucess/Than... [4]
Latest Articles
Ubuntu: the vpn conn...
Howto Install HP Pri...
ReactJS progress met...
Iframe dynamic resizing - resize to the height of the content

Iframe dynamic resizing - resize to the height of the content

IE4+ and NN6 can adjust the dimensions of elements including iframe
elments dynamically.
The onload handler of the body of the document in the iframe has to
call a function in the parent window which then adjusts the size.

This does not include the margin of the body element inside the frame in
the first case (iframwWindow.document.height). I don't know about the
other cases. The easiest thing is to make the margins 0 in the framed
subdocument, and control the layout in the enclosing document's iframe
element. But, that won't handle borders and such properly.

Here is the document containing the iframe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
adjusting iframe size
<script type="text/javascript">
function adjustIFrameSize (iframeWindow) {
if (iframeWindow.document.height) {
var iframeElement = document.getElementById
iframeElement.style.height = iframeWindow.document.height + 'px';
iframeElement.style.width = iframeWindow.document.width + 'px';
else if (document.all) {
var iframeElement = 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';
<h2>self adjusting iframe</h2>
<iframe name="iframeName" id="iframeName"
marginwidth="0" marginheight="0"

Note that the <iframe> tag has both name and id attribute set to the
same value. This is necessary to allow the iframe window object to
find the corresponding <iframe> element.

Here is the example test page (test20020403.html) which creates a page
with random length. For your own iframe pages you need to copy the
onload handler:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
test document which has random length
<body onload="if (parent.adjustIFrameSize)
<script type="text/javascript">
var lines = Math.floor(Math.random() * 100) + 25;
for (var i = 0; i < lines; i++)
document.write(i + ' Kibology<br \/>');

It would be nice to know what browsers those different cases are there
to handle. I traced through it on Firefox 2.0.2 and it took the first
case: iframwWindow.document.height does exist. Please add data, or fill
in if you know.

Other method for resize of iframe

*The page with an iframe

        <tittle>Iframe Resizing</title>
        <script type=”text/javascript” src=”resize.js”></script>
        <iframe width=”100%” height=”100%” scrolling=”auto” id=”iframe” name=”iframe” frameborder=”0″ src=”SOMETHING.HTML” /></iframe>
        <script type=”text/javascript” language=”JavaScript”>
        new Resize();

*The Prototype based javascript (resize.js )

function Resize() {
Resize.prototype = {
init: function() {
var userAgent = new String(navigator.userAgent).toLowerCase();

if (userAgent.indexOf(”msie”, 0) > 0) {//Only call it on IE
Event.observe(window, ‘load’, this.resizeIFrame.bindAsEventListener(this)); //This is where the magic happens

resizeIFrame: function() { 
var frame = $(’iframe’); 
var renderedDocumentHeight = frame.contentWindow.document.body.scrollHeight; 

if (renderedDocumentHeight < 600) {      
renderedDocumentHeight = 600;//Set a minimum height in case the document is really small

frame.height = renderedDocumentHeight;

Eliminate Scrollbars in sControls

Many new salesforce.com AJAX developers ask me how I am able to build my sControls into a frame and get the sizing setup in such a manner to prevent scrollbars. Over the years I've tried many different JavaScript functions but found that one works better than any I've seen.

For those reading this that might be unfamiliar with what I'm referring too I've included a screenshot.

In some instances an AJAX developer may want to build a sControl into salesforce.com whereby the sControl is embedded into the page. Basically there are tabs at the top and the navigation bar on the left-hand side with the sControl on the right-hand side.

When the web tab containing a sControl is setup through the Salesforce.com user interface the developer is allowed to dictate the size of the frame in which the sControl gets loaded. In most cases these new developers will simply alter that frame size to account for the largest height that may occur in the sControl. However, the script that I will eventually share with you will allow these developers to now ignore this pixel height setting and resize the frame dynamically.

I started using the script a year or two ago and a few months ago I altered it a bit because I was still getting scrollbars in Firefox. I found that the scrollbars didn't always occur but I wanted to account for the percentages and try to eliminate them in entirely. Therefore, I decided to add a line where I determine if the browser is Firefox and then add 10 pixels to the adjusted frame height. I found that this truly eliminates the vertical scrollbars in almost 100% of the instances where I've used this script.

So let's get to it. The script itself is:

//resizes the frame holding the sControl to make up for odd dimensions
function resizeFrame() {
var sframe = parent.document.getElementById("itarget"); //get id of iframe from parent
if (navigator.userAgent.indexOf("Firefox") != -1) { //if Firefox
var nHeight = document.body.scrollHeight+10; //add ten pixels to height of sControl frame
} else { //otherwise
var nHeight = document.body.scrollHeight; //use the returned height of sControl frame
sframe.style.height = nHeight+"px"; //set the frame height to correspond to the content


resizeFrame(); //calls function from above

Posted by admin on June 12 2009 10:58:09 9404 Reads · Print


Not a member yet?
Click here to register.

Forgotten your password?
Request a new one here.
Member Poll
Which PHP framework do you preffer?





eZ Components






You must login to vote.
You must login to post a message.

03/10/2011 18:17
Hi, How to remove Register from Login screen? I don't want them to register and have full access! if you leave register then they should not have any rights until the admin assigns them

26/09/2011 08:28
Please describe your problem with more details. Thank you.

22/11/2010 18:31
Help. There was a problem with the request; error regarding feedbackzdr form program

Custom web software development by Devzone Tech
Copyright © 2024 - www.webtoolbag.com