autoresize iframe inside table cell not working

I am attempting to use a JavaScript autooresize function with an IFRAME defined inside a table cell. The table cell is part of a table that is set up inside a DIV element.  The DIV elements are referenced in a LIST element. We use these DIV elements to create tabs on web pages, allowing for better organization of information.

Anway, to resize the IFRAME, you have to call an autoresize function as an onLoad defined in the IFRME, such as:

<iframe src="<?php echo $URL; ?>/iframe_content_page.phtml"
width="100%" height="200px" id="iframe1"
marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

The problem is, no page is loaded into the IFRAME unless I remove the call to the autoresize function.

I have tested the use of the autoresize function using an IFRAME in a page that has no DIV tabs, etc. It works fine.

I know that the autoresize function is being called, though,  because, if I add an alert() inside it, the alert displays fine.

The information about the scrollHeight and scrollWidth to resize the IFRAME, however, is not being set. I can confirm this by passing one of these parameters to alert() from inside the autoresize function. They are always zero. I have confirmed that the id for the IFRAME is being passed to the autoresize function, as alert() will report this, from inside the function.

The web page being loaded into the IFRAME is not a static HTML page. It is generated using a PHP function and an HTML template page. This is not the issue, however. I know because, if I display this constructed page in a separate browser, then do a View Source, and then copy this source file to a web page having same name as the IFRAME src file, the page still doesn't load if the call to the autoResize() function is present. So, making the src page a static HTML page doesn't resolve the issue.

No idea why the scrollHeight and scrollWidth information is not available to the autoResize function. I have even tried setting height and width inside the autoresize function (hard code), and this will work..

The height and width information is obtained as follows:

newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;

However, as I said, the height and width are not being set, even if I replace "id" in the call to getElementById() with 'iframe1' (including the single quotes), the id of the IFRAME.
It's as if getElementById() can't find the IFRAME.


Thanks!
MaglinFurnitureAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
You are talking about tabs - is this tab with the iframe hidden at page load?
0
MaglinFurnitureAuthor Commented:
@GaryC123

I'm not sure what you mean in saying the iframe is hidden. If I remove the call to the auto resize function, the page content for the iframe is displayed, otherwise, nothing i dispplayed (that is, nothing in the table cell that contains the iframe. All the other table cells etc are displayed inside the DIV element). Does this asnwer your question?
0
GaryCommented:
Can you post a link or some code from the parent and iframe source including your js functions.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

MaglinFurnitureAuthor Commented:
@GaryC123

The srtucture is

DIV id="info2" class="tabcontent" etc
 TABLE
   TABLE ROW + cells
   TABLE ROW
      TABLE CELL
         IFRAME definition (per above)
      END TABLE CELL
   END TABLE ROW
  END TBLE
END DIV
0
GaryCommented:
What browser are you using?
0
MaglinFurnitureAuthor Commented:
@GaryC123

The page is here:

http://www.maglin.com/products/bench/mlb100series-bw.html

The IFRAME should display on the CONFIGURE & QUOTE tab

An example, in which the autoresize function is used is here:

http://www.maglin.com/dev/php/iframe/14/

You could take this code and test it yourelf by replacing iframe_content.html with some page that has a lot of content. You'll see that the autoresize function works fine.

I am using IE 9
0
GaryCommented:
You have a syntax error here
var js_string = "Default_Session Object

in product_options_iframe.phtml
0
MaglinFurnitureAuthor Commented:
@GaryC123

I'll check that out. However, If I change the value of js_string to "Test", the page still doesn't load.

And, as I said, if you remove the call to autoResize(); in the iframe definition, the page loads, even with the syntax error.

I just set the value of js_string to "Test" if you want to take another look.

Thanks!
0
GaryCommented:
You have another error, line 333
      
document.forms.form.onsubmit = function() {

Can you also disable the tab plugin so all the tabs show
Normally an element has no height/width if it is hidden, I've never tried it in a situation where an iframe is in the tab so I'm not sure if this is the problem
0
MaglinFurnitureAuthor Commented:
@GaryC123

I don't believe the error you pointed out has any effect on this problem, as, in the example I gave you in which the autoResize() function is working fine, this code is present, with the error.

I tried replacing the DIV definition for the CONFIGURE & QUOTE secton,  which specifies the id and class with just < div > to disable the plugin. This seems to have worked adequately. Now the iframe content is displayed.

This tends to reconfirm my suspicion that getElementById() can't find the IFRAME. If the IFRAME is hidden, why would it display without the call to autoResie()?

In any case, it does appear that being inside the tab is the problem. Is there a way to force the IFRAME to be visible to getElementById()?

I've left the page in place with the tab plugin disabled (for CONFIGURE & QUOTE).
0
GaryCommented:
Normally I would load dynamic content like that when the tab is selected, I cannot see anything in the code to indicate how to do it.
What I might do is set that tab to visible at page load and then switch to the first tab when the iframe has loaded inside your autoresize code.
Aesthetically I don't think it would affect the page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MaglinFurnitureAuthor Commented:
@GaryC123

How do I set the tab to visible at page load?
0
GaryCommented:
Is this the plugin you are using
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

Add class="selected" to that tab

Then in you resize function as the last line add
instance.expandit(position)

position maybe either 0 or 1 - I cannot tell from the documentation
0
MaglinFurnitureAuthor Commented:
@GaryC123

Yes, that is the plugin we are using

Adding class="selected" did the trick

Using instance.expandit(position) actually caused a problem, so I deleted it.

Thanks very much for your help!
0
GaryCommented:
products.expandit(0)

If not 0 then use 1
0
MaglinFurnitureAuthor Commented:
Ah, yes.

Thank you.
0
GaryCommented:
Yeah it happens quick so barely noticeable.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.