Iframe height adjust with tabbed content

**tonypili** · 09-21-2009, 08:22 AM

1) Script Title: Iframe DDI Script 11

2) Script URL (on DD): www.dynamicdrive.com/dynamicindex17/iframes2.htm

3) Describe problem:

Hi everyone, this is the first time I am posting so be gentle. I have spent the last 2 days trying to adjust the above script so as to automatically resize my iframe... any help would be greatly appreciated.

I have an iframe that displays a content/child page which in turn contains tabbed content. One tab may contain content that is larger than the next tab. When switching tabs, is there a way to send a message to the parent that holds the iframe to autoadjust its height without having to reload the content page into the iframe ? I suppose the same problem would arise if font size is adjusted within the content page !! , Please note the iframe does not need to load content from outside its domain.

I am desperate, will pay to get this done

The tabbed panels sitting in the content page are scripted using the Tab Content Script (v 2.2) that appears on dynamic Drive. My efforts to date is trying to associate each tab click with a resize function that is sent to the iframe. Not sure if this is the way to go, so appreciate any comment / examples from those that have faced this elsewhere.

Any clues would be greatly appreciated

**tonypili** · 09-24-2009, 03:34 AM

Cann anyone help on this issue ? Have I offended people with improper protocol or lack of information. Am happy with "cant be done" if that is the case, but if by chance it can, am happy to pay for the service. Would it help if I pasted my original code ?

**magicyte** · 09-24-2009, 03:42 AM

Is this iFrame having a fixed width or fixed height, expanding with an expanding heigth or expanding width, respectively?
For example, if the content is large, the page expands downward so it can be read? or a little of the width so you scroll vertically and not horizontally?

Please post your code that you are using for this task (the modified DD script). Also,

Please post a link to the page on your site that contains the problematic script so we can check it out. This helps us help you.

**tonypili** · 09-27-2009, 05:48 PM

Many thanks Chris.

My objective is to have a fixed width iframe that has the ability to adjust its height not onle when a new page is loaded, but also when an existing page expands via selecting tabs with variable container heights.

Here is the url for the parent page I have constructed (called iframe_tab_test.htm) that utilises the SSI 2 script:
http://www.dap.com.au/iframe_tab_test.htm. This is followed by the html (in blue) of the tab page .

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 5</title>
<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=["DAP"]

//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, true)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>
</head>

<body>
<iframe id="DAP" src="http://www.dap.com.au/tabtest.htm" scrolling="no" marginwidth="10" marginheight="10" frameborder="2" vspace="0" hspace="0" style="border:1px solid #000000; overflow:visible; width:56%; display:none" name="DAP" border="1"></iframe>
</body>

</html>

And this is the child page called tabtest.htm

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dynamic Drive</title>
<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: -2;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 11px Arial;
}

#tablist li{
list-style: none;
display: inline;
margin: -3;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 5px;
border-top:1px solid #778;
border-left:1px solid #778;
border-right:1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>
</head>

<body>
<table border="1" width="600" bordercolor="#FF00FF" id="table1">
<tr>
<td> <ul id="tablist">
<li>
<a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)" style="text-decoration: none">
Dynamic Drive</a></li>
<li>
<a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF" style="text-decoration: none">
What's New</a></li>
<li>
<a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6" style="text-decoration: none">
What's Hot</a></li>
<li>
<a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF" style="text-decoration: none">
Search</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<p>
fgfgfgf</p>
<p>dfdfdf</p>
<p>hgg<p> <p>end<p> <p>end<p><br />
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section
to see recently added scripts to our archive.
</div>

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a
list of DD scripts that are popular to the visitors.
tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt<br>
tytytyttttttttttttt<br>
hgghhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br>
jjjjjjjjjjjjjjj bnbnb rrrrrrrrrrrrrrr <br>
<br>
<br>
<br>
<br>
<br>
the end</div>

<div id="sc4" class="tabcontent">
<br>
<br>
<br>
<br>
<br>
</div>

</DIV>

</td>
</tr>
</table>

</body>

</html>

**tonypili** · 10-06-2009, 06:43 AM

I am ready to give up on this. Can anyone make a suggestion how to go about tackling this problem ? No need for working examples. Any pie in the sky thought will do.

Thread: Iframe height adjust with tabbed content

Thread Tools

Search Thread

Iframe height adjust with tabbed content

Bookmarks

Bookmarks

Posting Permissions