Why doesn't this work correctly in FireFox?

[John Kotuby]

Hi all,

I have created an ASPX page in VS 2008 that appears inside of an IFRAME
inside a standard HTML page. Because it loads from an external site and is
database driven, the first load takes a few seconds. As a result I have
placed an absolutely positioned <DIV> element that is built into the HTML
page that uses an animated GIF and a "Please Wait" message.

When the IFRAME finishes loading a javascript function is called to change
the Visibilty of the DIV to hidden. All this works fine with IE but in
Firefox the DIV remains visible. Below is the relevant code from the HTML
page.

Can anyone tell me why this doesn't work in FireFox?

-----------------------------------------------------------------
<td width="775" valign="top">
<iframe width="99%" style="z-index:1" height="820px" marginheight="4px"
marginwidth="4px" id="ifSearch" scrolling="no"
src="http://www.motillia.net/search.aspx" onload="iframe_onload();">
</iframe>
</td>

<script type="text/jscript" language="javascript">
function iframe_onload()
{
var theWaitCell = document.getElementById('Wait1');
theWaitCell.style.visibility = "hidden";
}
</script>

<div id="Wait1" style="visibility: visible; position: absolute; top: 40%;
left: 40%">
<table id="WaitTable1">
<tr>
<td id="WaitCell1" align="center" valign="middle"
style="background-color: Silver;
border-width: 4px; border-style: outset; color: White;
height: 100px; width: 300px;
font: vedana bold 16px">
<img alt="downloading" src="images/loadingAnimation.gif" />
<br />
Search Tool Initializing...
</td>
</tr>
</table>
</div>

 

[bruce barker]

it works correctly in firefox, its IE thats wrong (good old buggy IE).
setting visibility='hidden' mean do not display but take up space. you
probably wanted to make the div disappear and not take up space try:

theWaitCell.style.display = "none";


-- bruce (sqlwork.com)

 

[John Kotuby]

Thanks bruce, I really thought what you suggested would do the trick. I was
SO sure that I didn't try the "fix" until a few minutes ago.

Now that I use... theWaitCell.style.display = "none";

It still works in IE7 but not in FireFox 3. I added an alert(); to the
function iframe_onload() and discovered that in FF the Alert box doesn't
even display. It appears that FF3 is not respecting the
onload="iframe_onload();" but IE7 is.

Everything I have read indicates that FF should have no problem with the
IFrame onload event.

This is becoming very perplexing for what should be a simple issue.

Thanks for your help...but you (and Mark Rae) are correct in that IE is the
ugly duckling of the lot of browsers and I will test in FF from now on.

 

[John Kotuby]

Thanks Mark,

You are correct that FF is the better browser to test in as I have
encountered alignment issues there that weren't apparent in IE and were
indicative of poor coding such as failing to delcare align="center" in a
table cell while expecting the contents to center themselves. Yeah, I use
tables even though it's frowned upon in "modern" web design.

Anyway, I have tried using... theWaitCell.style.display = "none" in the
iframe onload event handler.
It still works in IE7 but not in FireFox 3.

I added an alert(); to the function iframe_onload() and discovered that in
FF the Alert box doesn't
even display. It appears that FF3 is not respecting the
onload="iframe_onload();" but IE7 is.

Everything I have read indicates that FF should have no problem with the
IFrame onload event.

This is becoming very perplexing for what should be a simple issue.

Any idea why the iframe onload event is not firing in FF?

 

[Göran Andersson]

Can anyone tell me why this doesn't work in FireFox?

<script type="text/jscript" language="javascript">

JScript is the name of Microsoft's implementation of Javascript. I
believe that Firefox is ignoring the script tag as the language is not
recognised.

Try:

<script type="text/javascript">

 

[John Kotuby]

JScript is the name of Microsoft's implementation of Javascript. I believe
that Firefox is ignoring the script tag as the language is not recognised.

Try:

<script type="text/javascript">

Göran thank you,

That was the problem. I was using proprietary Microsoft language. After
changing the Script tag to read <script type="text/javascript"> the event
fires in both IE and FF.

BTW... It appears that either syntax:
theWaitCell.style.display = "none";
or
theWaitCell.style.visibility = "hidden";
works properly in both browsers.

I will be very careful from now on to use standards-compliant coding and
test first in FF.

Now I must comb through my other work and see if I have made the same
mistake elsewhere. I think the jscript reference got pulled into my code by
copying example code from VStudio or MSDN help examples.

Thanks again Göran