Hi all,

I have a page where all the content is on one HTML page, in hidden DIVS and made visible with javascript depending on the link the user clicks. It works like a dream in Firefox (of course), but everything is disabled in IE.

I made this page a year ago and can't exactly remember how I got the code to work, but I thought I had two different "else ifs" for IE and Netscape. Unfortunately, of course, it doesn't work. At this point I'm not concerned about Netscape, just IE.

Anyone have any ideas where I'm going wrong in my code? I'd love for this to get working.

<!--
function toggle(object) {
  if (document.getElementById) {
    if (document.getElementById(object).style.visibility == 'visible')
      document.getElementById(object).style.visibility = 'hidden';
    else
    document.getElementById('home').style.visibility = 'hidden';
    document.getElementById('about').style.visibility = 'hidden';
    document.getElementById('services').style.visibility = 'hidden';
    document.getElementById('contact').style.visibility = 'hidden';
    document.getElementById('gallery').style.visibility = 'hidden';
      document.getElementById(object).style.visibility = 'visible';
  }

  else if (document.layers && document.layers[object] != null) {
    if (document.layers[object].visibility == 'visible' ||
        document.layers[object].visibility == 'show' )
      document.layers[object].visibility = 'hidden';
    else
    document.layers['home'].visibility = 'hidden';
      document.layers['about'].visibility = 'hidden';
      document.layers['services'].visibility = 'hidden';
      document.layers['contact'].visibility = 'hidden';
      document.layers['gallery'].visibility = 'hidden';
      document.layers[object].visibility = 'visible';
  }

  else if (document.all) {
    if (document.all[object].style.visibility == 'visible')
      document.all[object].style.visibility = 'hidden';
    else
      document.all['home'].style.visibility = 'hidden';
      document.all['about'].style.visibility = 'hidden';
      document.all['services'].style.visibility = 'hidden';
      document.all['contact'].style.visibility = 'hidden';
      document.all['gallery'].style.visibility = 'hidden';
      document.all[object].style.visibility = 'visible';
  }

  return false;
}
//-->

By the way, you can view the page in action here.

Getting the menu to work is easy. However, your page has serious issues that need correcting.

First - Answering the original question. The problem does not lie with the JavaScript code you supplied. Instead, it is with the menu buttons themselves. Here is your code for the ABOUT button. The problem is caused by an extra quote - highlighted in red. Remove that and the code should work.

<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('index2_10', 'images/index2_10-over.jpg'); return true;"
ONMOUSEOUT="changeImages('index2_10', 'images/index2_10.jpg'); return true;" "onclick="toggle('about');">
<IMG NAME="index2_10" SRC="images/index2_10.jpg" WIDTH=56 HEIGHT=19 BORDER=0 ALT=""></A></TD>

There are several other points you would be wise to address.

1. Do not use # for links. This looks for a reference somewhere else on the page and can screw your JavaScript up. If you want the link to point nowhere - as you obviously do - use <a href="javascript:void(0)"> instead

2. In the script you supplied, you created a variable named object. This is a keyword that is reserved by JavaScript. Instead use something else like obj.

3. You have a lot of HTML comments in your code like <!-- Start Background Stuff --!>. This format is incorrect. There should be no exclamation mark at the end of a comment. It should be <!-- Start Background Stuff -->.

4. You have written the script for all different types of browsers. document.getElementById('xxx') works for all modern browsers including netscape. You can therefore dispense of the rest. You could replace the entire function with this.

function toggle(obj) {
  document.getElementById('home').style.visibility = 'hidden';
  document.getElementById('about').style.visibility = 'hidden';
  document.getElementById('services').style.visibility = 'hidden';
  document.getElementById('contact').style.visibility = 'hidden';
  document.getElementById('gallery').style.visibility = 'hidden';
  document.getElementById(obj).style.visibility = 'visible';
}

There are nicer ways of doing it, but this works fine


All of these points will help make your code faster to load and more cross-browser. I guess from your code you have let an application like photoshop build the page for you. I recommend learning to hard code HTML yourself. There are many good tutorials on the Internet and the results are much cleaner. And if you are a sad geek - like me - it is much more rewarding knowing you did it on your own.

Thank you SO much for your comments and suggestions, RikComery! I will get on those changes right away.

I do usually code my own work, but I let Photoshop do the table for me (this website was for a class and my teacher wanted us to see how Photoshop was able to write HTML.... sigh) and filled in the rest. Even so, my own hand coding is extremely messy (something I'd love to fix), and unfortunately I haven't touched Javascript in quite a while now. So I really appreciate the tips you've given me!