Script works in everything except firefox???

[tannum]

Hi,

I am a designer with a little programming experience and I have cobbled together some javascript that toggles the alternating visibility of two divs.

It works fine in all browsers I've tested except firefox.

What am I doing wrong for firefox?

Here's the code :-




<script type="text/JavaScript">
<!--
function toggle () {
if (Graphic_Div.style.display == "none") {
Graphic_Div.style.display = '';
Help_Pages_Div.style.display = 'none';
}
else {
Graphic_Div.style.display = 'none';
Help_Pages_Div.style.display = '';
}
}
//-->
</script>








<div id="Graphic_Div">

<div align="center" class="Show_Help_Pages">

<div align="right">

<a href="javascript:toggle()">SHOW HELP FILES</a><br /><br/></div>

<p>&nbsp;</p>

<p><img src="images/Select_a_page_from_admin.gif" width="350" height="187" /></p>

</div>
</div>


<div id="Help_Pages_Div" style="display:none;">

<div align="center" class="Hide_Help_Pages">

<div align="right"><a href="javascript:toggle()">HIDE HELP FILES</a><br/><br/>

</div>
</div>

<iframe src="Help_Files/Help_Index.html" width="620" height="600"></iframe>

</div>


Thanks in advance if you decide to help.
Cheers
Greg

 

[postyr]

May I suggest that when referring to the DIV’s id, you use the “getElementById()” function.

So, as an example, try replacing your line

if (Graphic_Div.style.display == "none")

if ((getElementById(‘Graphic_Div’)).style.display == "none")

and continue that theory throughout.

 

[tannum]

Hi postyr,

No luck I'm afraid. Tried your suggestion, I think I have it right:

function toggle () {
if ((getElementById('Graphic_Div')).style.display == "none") {

(getElementById('Graphic_Div')).style.display = '';
(getElementById('Help_Pages_Div')).style.display = 'none';
}
else {
(getElementById('Graphic_Div')).style.display = 'none';
(getElementById('Help_Pages_Div')).style.display = '';
}
}


You might be onto something though, originally the Firefox error console gave this warning :

"Graphic_Div id not defined" for this line:

if (Graphic_Div.style.display == "none") {


So it's something to do with that I think.

And I know what you mean about the 'programmer' tag against your name, I couldn't find one that I fit into so I just choose (IS/IT--Management), not really sure what it means

Thanks for your help anyway postyr.

Greg

 

[postyr]

I don’t think it needs to apply to other elements. For instance, if you get an error message in Firefox, try changing each line at a time, then see when the next error occurs.

Also, I would suggest (maybe) creating a variable for the “Graphic_div” and using that instead of referring to it directly.

As an example, “myId = getElementById(‘Graphic_Div’)

Then, in your code, you could replace

if (Graphic_Div.style.display == "none")

with

if (myId.style.display == "none")


I think it is the first line only that is causing your problem. If not, step through it as mentioned above.

 

[tannum]

That should be:

"Graphic_Div not defined" for this line:

not:

"Graphic_Div id not defined" for this line:

I missquoted that error message.

 

[tannum]

Oops, posted just before you, postyr.

I'll try what you suggest and see how we go.

Greg

 

[tannum]

Still no joy, postyr.

I have this now:

var myId_1 = getElementById('Graphic_Div');
var myId_2 = getElementById('Help_Pages_Div');

function toggle () {
if (myId_1.style.display == "none") {
myId_1.style.display = '';
myId_2.style.display = 'none';
}
else {
myId_1.style.display = 'none';
myId_2.style.display = '';
}
}

The error console gives this:

"myId_1 is undefined" on this line :

if (myId_1.style.display == "none") {




I'll go off and do a bit of research on "undefined".

Greg

 

[tsuji]

[tt]function toggle () {
[red]var Graphic_Div=document.getElementById("Graphic_Div");
var Help_Pages_Div=document.getElementById("Help_Pages_Div");[/red]
if (Graphic_Div.style.display == "none") {
Graphic_Div.style.display = '[blue]block[/blue]';
Help_Pages_Div.style.display = 'none';
}
else {
Graphic_Div.style.display = 'none';
Help_Pages_Div.style.display = '[blue]block[/blue]';
}
}[/tt]

 

[tannum]

Awsome tsuji, works in everything.

Thanks a lot, much appreciated.

And postyr, thanks for trying to help too.

Cheers
Greg
Love these forums