Solved

iframe problem

Posted on 2007-11-23
18
302 Views
Last Modified: 2010-04-09
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
Comment
Question by:eaweb
  • 9
  • 6
18 Comments
 
LVL 6

Expert Comment

by:TheKyle
ID: 20340255
Can you post a link to an example page?
0
 

Author Comment

by:eaweb
ID: 20351249
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
 
LVL 13

Expert Comment

by:Onthrax
ID: 20381669
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
 

Author Comment

by:eaweb
ID: 20463865
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
 
LVL 13

Expert Comment

by:Onthrax
ID: 20507071
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
 

Author Comment

by:eaweb
ID: 20511091
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
 

Author Comment

by:eaweb
ID: 20787152
anyone who can help me out?????????????!!!!!!!!!!!!!!!
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 20787281
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:eaweb
ID: 21004709
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
 

Author Comment

by:eaweb
ID: 21013458
no, please don't tag for cleanup. yesterday i posted somthing for Onthrax.
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 21029525
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
 

Author Comment

by:eaweb
ID: 21054334
ok thanks a lot
0
 

Author Comment

by:eaweb
ID: 21288127
Onthrax, did you have the chance to look at the code??

thanks
0
 
LVL 13

Accepted Solution

by:
Onthrax earned 500 total points
ID: 21312827
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
 

Author Comment

by:eaweb
ID: 21368015
i dont understand why using a delay. could you explain a little bit more?
0
 
LVL 13

Expert Comment

by:Onthrax
ID: 21368045
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 48
Tag input html 4 37
using web browser with BING 40 86
CSS grid style change 2 14
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now