Javascript Toggling Visibility Question

Okay so I'm trying to get this piece of Javascript to work. Also, I'm completely new to Javascript. Essentially what I'm trying to do is I have a menu on the left side of my page that has the links: home, about, response, script exercise, final project, and contact listed. Each one of these has a labeled div id (i.e. #home, #about, #response...) on my CSS page and all are placed i开发者_运维知识库n the same position on the page and are hidden. When a links are clicked on, the corresponding div id is supposed to become visible on the page. The code I'm using is this:

function show(listx) {

     home.style.visibility = "hidden"
     about.style.visibility = "hidden"
     response.style.visibility = "hidden"
     script.style.visibility = "hidden"
     project.style.visibility = "hidden"
     contact.style.visibility = "hidden"

     listx.style.visibility = "visible"

     }

function shows(listz) {

     home.style.visibility = "hidden"
     about.style.visibility = "hidden"
     response.style.visibility = "hidden"
     script.style.visibility = "hidden"
     project.style.visibility = "hidden"
     contact.style.visibility = "hidden"

     listz.style.visibility = "visible"

     } 

I adapted this code from an old script I found titled Fade in Menu Script by Felipe Bottrel Souza 1998.

The problem is, this script works in IE, Chrome, and Safari, but not in Firefox.

Any ideas/help is greatly appreciated!

Giving something an id isn't supposed to automatically give it a name in JavaScript. Many browsers do it for compatibility with old code, but as you've noticed it's not reliable and should be avoided.

Instead, you should use the document.getElementById method to reference an element by id.

For example, you could replace every instance of home with document.getElementById("home"), or define all of the elements you want to access the first time you use them:

var home = document.getElementById("home");

Calling the variables "home", "about", etc. is not pointing to the div ids, unless you set them on page load. Try this:

var home, about, response, script, project, contact, listx;
window.onload = function() {
    home = document.getElementById('home');
    about = document.getElementById('about');
    response = document.getElementById('response');
    script = document.getElementById('script');
    project = document.getElementById('project');
    contact = document.getElementById('contact');
    listx = document.getElementById('listx');
}

I recommend using a javascript library like jQuery, prototype, MooTools, or something else. Anything.

If you're new to javascript, don't utterly waste your time getting familiar with the DOM. It will take you forever and you still won't be able to do have the stuff others can super quickly, and you won't have it done cross-browser, performantly, with bugs worked out.

For example, the code you're struggling with could be done something like this. For starters, since they're all in (theoretically) a container div and are siblings of each other, it should be super simple:

$('#listx').show().siblings().hide();

Whoa! one line of code. Easy peasy. Stop wasting time with raw javascript!

Here's a much more compact way to code this:

Make all these objects in your page have CSS IDs that match these names.

var hideList = ["home", "about", "response", "script", "project", "contact"];

function show(listx) {
    for (var i = 0; i < hideList.length; i++) {
        document.getElementById(hideList[i]).style.visibility = "hidden";
    }
    document.getElementById(listx).style.visibility = "visible";
}

I see no need for separate functions for show() and shows() as they only different in the passed parameter so you can just pass the appropriate object name to the one function.

If you use a modern library like jQuery or YUI, you can just give each object you want to hide a particular class name and you can then fetch all objects in the page with that class name into an array in one function call and then operate on the items in that array. This is more maintainable because if the content of the page changes, the code doesn't have to be changed to match.