CODEWITHSUNDEEP
javascripthtmlvariables
Eds
Eds

Reputation: 575

dom referencing only working correctly in IE

I have a javascript function that I am calling from an image onClick event in my page.

Basically the function sets a variable which is referencing an element within the same page.

here is how the function is called (note, the html is printed using PHP, but don't think that has any effect on the html itself):

 echo "<img src='site/images/apps/show.gif' onClick='apps()' id='appbutton' style='#'>";

here is what the script references:

<iframe frameborder="0" name="app_frame" src="site/apps.html" width="0%" height="100%" scrolling="no"></iframe>

and finally, here is how it is referenced and what is done with it:

<script type="text/javascript">
 function apps()
 {
 var element = document.getElementById("app_frame");
 if (element.width == '0%')
 {
    parent.document.getElementById("frame").setAttribute("width","100%");
    parent.document.getElementById("app_frame").setAttribute("width","0%");
    parent.document.getElementById("appbutton").setAttribute("src","site/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
 }
 else
 {
    parent.document.getElementById("frame").setAttribute("width","65%");
    parent.document.getElementById("app_frame").setAttribute("width","35%");
    parent.document.getElementById("appbutton").setAttribute("src","site/images/apps/hide.gif");
    parent.document.getElementById("wthrbutton").style.visibility="visible";
 }
 }
 </script>

The main issue is on the first line of the function, var element = document.getelementbyid.

Firefox, Chrome and Safari all hve issues with this, and none of them seem to set the variable, which renders the rest of the script useless, as the whole thing revolves around the variable.

Anyone know any other way of setting that element as a variable that would work in these browsers?

Thanks

Upvotes: 0

Views: 179

Answers (1)

Some Guy
Some Guy

Reputation: 16200

That is because there is nothing with an id of app_frame. You have set the iframe's name to app_frame. Change your iframe's code to:

<iframe frameborder="0" name="app_frame" id="app_frame" src="site/apps.html" width="0%" height="100%" scrolling="no"></iframe>

An article pointing out this quirk in IE

MSDN's doc on getElementById states it returns names or id

Upvotes: 2

Related Questions