• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 361
  • Last Modified:

iframe problem

hi,

i have the following problem

example:

in pageA i have an iframeA wich change size depending on its content.

in the the page of iframeA in have two iframes 1 and 2.

when submitting the form of iframe 1 it opens in iframe 2 but it iframe 2 overlaps the data below i iframeA in pageA.

what could be here the problem.

pageA layout:

texttexttexttext
iframeA
texttexttexttext

page layout of the page of iframeA:

iframe1
iframe2

problem
when iframe2 display its data it overlaps text

pageA layout:

texttexttexttext
iframeA
GONE>>texttexttexttext<<GONE

i want the texttexttexttext below of iframeA to stay while creating space for the dat of iframe2. like a dynamic table height.

0
eaweb
Asked:
eaweb
  • 9
  • 6
1 Solution
 
TheKyleCommented:
Can you post a link to an example page?
0
 
eawebAuthor Commented:
the iframe example i am using is this one

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

i need the iframeA in pageA to ajdust to the iframeB from pageB in pageA

example

texttexttexttext
iframeA-> iframeB(= iframeB is in iframeA)
texttexttexttext
0
 
OnthraxCommented:
The script you are using requires the iframed pages to be in div tags to function properly. Put all of your content of all pages involved inside a div tag right after the body and your problem should be fixed.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
eawebAuthor Commented:
onthrax,

the div part did not helped. here my i frame part maybe i am missing some settings

<iframe id="myframedisplay" name="myframedisplay" src="vsddp.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none; height:50px"></iframe>

i am poping up a calender in this iframe part but i can only see the 50px part. the calender doesnt come in front
0
 
OnthraxCommented:
Sorry for the late reply. My HD has failed, so have been trying to get back online for a week.

Anyways.. is the display:none there for a reason?
Do you have this code online so I can take a look at the live data?
0
 
eawebAuthor Commented:
o sorry for that. i was testing with the display none. it is not part of the code.

no i dont have it live but you can take a look at this website from i am using the code:

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
0
 
eawebAuthor Commented:
anyone who can help me out?????????????!!!!!!!!!!!!!!!
0
 
OnthraxCommented:
Sorry must have missed your reply.

I am familiar with the script and it should work fine as I don't have any issues with it.
Therefore I was asking to see your 'entire' code to see if something is screwing it up.
Without that I cannot help you any further sorry.
0
 
eawebAuthor Commented:
this is my page A that calls page B


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

//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>
</head>

<body>

<iframe id="myframe" src="pageB.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

</body>
</html>



this is my page B that calls page C


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

//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>
</head>

<body>

<iframe id="myframe" src="pageC.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

</body>
</html>

0
 
eawebAuthor Commented:
no, please don't tag for cleanup. yesterday i posted somthing for Onthrax.
0
 
OnthraxCommented:
Hehe 'Tagged for future cleanup' means it will remain open again for an x number of days before an automated request for closure is issued again. So we have time :)

I'll see if I can take a look at it today. I'll get back to ya..
0
 
eawebAuthor Commented:
ok thanks a lot
0
 
eawebAuthor Commented:
Onthrax, did you have the chance to look at the code??

thanks
0
 
OnthraxCommented:
Whoops I totally forgot.. I'm sorry.

I am just in the process of formatting my pc, so I don't have any apps installed yet.

However, what you could try is putting a little delay on the function. Put this in your body load in which the Iframe is that you are trying to resize:

<body onload="UseDelay();">

the javascript:
function UseDelay() {
     setTimeout("resizeCaller()", 2000)
}

You could try to experiment with the 2000 value, which is the number of milliseconds to wait before calling the resizeCaller. also to test if the UseDelay function is being called at all put an alert box in it to test..
0
 
eawebAuthor Commented:
i dont understand why using a delay. could you explain a little bit more?
0
 
OnthraxCommented:
If one would load page B into an iframe on page A and tries to resize it while page B is not fully loaded it will fail. WHen using a little delay one can make sure the page is loaded before attempting the resize.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now