Iframe with automatic height adjustment

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:46

Iframe with automatic height adjustment

Poster: mcarter555
Dated: Sunday April 24 2005 - 23:21:50 BST

I have an iframe script running on my site that is automatically adjusting the iframe to fit the height of the internal page that it loads. It works perfect with regular text links but i can not get it to work with my DHTMl Menu. Inorder for it to work correctly, the link has to have this information:

Code:

and it has to have this loaded into the head tag:

Code:

<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

How would i go about incorporating this into the menu_data.js script so that it will work correctly. Any help would be greatly appreciated. I know just enough about this stuff to get myself stuck!!!

Poster: Ruth
Dated: Sunday April 24 2005 - 23:40:57 BST

Hi,

We really need a url so we can see/get the page to test things....well, unless Kevin gets back in town, then he can probably tell you without seeing the page :lol:

But, given I'm so not knowledgeable about js, I need to see the page and be able to test things.

Ruth

Poster: mcarter555
Dated: Sunday April 24 2005 - 23:45:54 BST

Ruth,

Thanks for replying. This page has the iframe and dhtml menu that i am talking about. Just the first drop down is set up right now.

http://www.magnoliaproperties.org/search.php

You will notice that when you click on the link in the menu, it opens the page as blank instead of in the iframe.

Thanks for your help!

mark[/url]

Poster: mcarter555
Dated: Monday April 25 2005 - 0:47:23 BST

Ruth,

Thanks for your help, but i think i have decided this site doesnt need the drop down menus after all. But if you do find anything, please let me know because i am sure that i will need it in the future.

Thanks,
Mark

Poster: Ruth
Dated: Monday April 25 2005 - 1:27:54 BST

OK, got it.

The problem isn't the function you are using, and you don't need to put it anywhere in the menu data file.

In order for pages to open in an iframe from a link in the menu you need two things:

1.

Code:

<script>
function openIFrame(iFrameId,winURL)
{
   ifId=gmobj(iFrameId)
   ifId.src=winURL
}

</script>

You need to place that on your page at some point before your iframe.

2. You need to call that function in the aI string. For example using teh Search Listings item:

Code:

aI("text=Search Listings;url=javascript:openIFrame('myframe','listman/exec/search.cgi');");

Your other function to size the iframe doesn't have anything to do with the menu and is not needed in the menu.

Ruth

Poster: mcarter555
Dated: Monday April 25 2005 - 15:21:15 BST

Thanks Ruth, I will give it a try!!!

Industrial Strength JavaScript and DHTML Menus

Iframe with automatic height adjustment