Home > DevNotes, SharePoint > Resizing an iFrame to it’s parent

Resizing an iFrame to it’s parent


In some cases it’s not possible to use the style tags width and height to define the size of an object on a web page. This is typically the case when an inline frame is placed within a placeholder such as a <div> or a <td>. My approach to resolve this is to include a javascript which resizes the iframe based on it’s parents width and height.

The script is based on a Sharepoint 2007 collaboration page template and has a static reference to the page footer. If this should be used elsewhere, please modify the static object references in the code.

function resizeFrame() {
   objFrame = document.getElementsByTagName("iframe").item(0);
   windowHeight = document.body.offsetHeight;
   headerHeight = absoluteTop(objFrame);
   iframeHeight = windowHeight - (headerHeight + footerHeight);
   if (iframeHeight >=0) { objFrame.style.height = iframeHeight};
   objFrame.style.border = "1px solid gray";
   objFrame.style.margin = "0px";
}

function absoluteTop(objNode) {
   var currentNode=objNode;
   var sumTop=0;
   while(currentNode.tagName!="BODY"){
      sumTop+=currentNode.offsetTop;
      currentNode=currentNode.offsetParent;
   }
   return sumTop;
}   function getFooterHeight() {
   objPlaceHolder = document.getElementById("ctl00_MSO_ContentDiv");
   footH = document.body.offsetHeight - (absoluteTop(objPlaceHolder) + objPlaceHolder.offsetHeight);
   return footH;
}

var footerHeight = 30;
window.attachEvent ("onresize", resizeFrame);
window.attachEvent ("onload", resizeFrame);

N’Joy!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: