function to toggle visibility on <div> tags !working 1

[thisguy]

Good Afternoon,

Over the weekend I was trying to write my first DHTML web page, using JavaScript. I wanted to create a page which has links across the top of the document, and when the users clicks on a link it will toggle the visibility property of a <div> tag, making the appropriate layer become ‘visible’ and the others, ‘hidden’.

For my script, I first assigned the <div> tags to variables, and then created an array of those variables. The links called a single function which used a ‘for loop’ to cycle through the layers and change visibility.

The function I wrote was:

//LayerName consists of the <div> associated with that link
//LayerNameArray consists of the array containing the <div>s.
//Hidden and Visible are variables containing the text “hidden” or “visible” respectively.

function ShowLayer(LayerName)
{
for (count=0;count<LayerNameArray.length; count++)
{
if (LayerName==LayerNameArray[count]){
if (document.all){
LayerName.style.visibility = Visible;}
else{
LayerName.visibility = Visible;}}
else{
if (document.all){
LayerName.style.visibility = Hidden;}
else{
LayerName.visibility = Hidden;}
}}
}
}

I was never able to run this function correctly, but I also never received any errors, it was as if nothing happened when I clicked a link. I tried debugging using window.alert calls and discovered the ‘else’ portion of the function (to change the visibility to hidden) was causing the ‘error’. Finally I got fed up and split the function so that if (LayerName!=LayerNameArray[count]) then it would simply call another function to hide the layers. This worked, but I would really like know why the original function was not correct.

Thanks in advance.

This Guy!

 

[Placido]

Hi-

You have one too many &quot;}&quot; at the end of the function... Take one out...

Ciao
Placido

 

[webscripter]

That's great! I remember writing my first menu with layers a year or two ago and it was a challenge! But I still have it on my website.

Do you have a url so we can see it in action? Thanks
Tricia
yorkeylady@earthlink.net

 

[thisguy]

First, thank you very much Placido. To think I was looking through book after book trying to figure out where I went wrong.

Tricia, I'm sorry, but the web site is not yet available. I still have some work in PHP to do before I can actually have it up and running, but I will be hanging around here and let you know.

Thanks Again,
!ThisGuy

 

[xutopia]

is there a reason why you are using document.all rather than the standard compliant document.getElementById? Heck you could probably use document.getElementsByTagName here and gain speed.

function ShowLayer(id)
{
var divs = document.getElementsByTagName(&quot;DIV&quot

for (var i = 0; i < divs.length; i++)
{
var div = divs
div.style.visibility = (div.id == id) ? &quot;visible&quot; : &quot;hidden&quot; ;
}
}

if you have an array with all the ids of the divs you can simply replace everything like so :

var myDivIdArray = [&quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;]

function ShowLayer(id)
{
for (var i = 0; i < divs.length; i++)
{
var div = document.getElementById(myDivIdArray)
div.style.visibility = (div.id == id) ? &quot;visible&quot; : &quot;hidden&quot; ;
}
}

This way of doing things ensures your code will work with standard compliant browsers and that my friend as a web developer is the best favor you can do to the free world. Gary

http://www.xutopia.com

Haran
==========================

 

[thisguy]

As I created the page I tried to take into account the different web browsers and what they support. First, I assigned the specific elements I needed, to variables (which I also use for other things). To do this I used a combination of:

if (document.getElementByID){
ThisLayer = document.getElementById[This];
ThatLayer = document.getElementById[That];}
else if (document.all){
ThisLayer = document.all[This];
ThatLayer = document.all[That];}
else if (document.layer){
ThisLayer = document.layer[This];
ThatLayer = document.layer[That];}

For some reason I thought IE did not support getElementsById[], which is why I was used the document.all (for assigning the variables). Also I mistyped when I wrote the original post, the basic function I used was

if (LayerName==LayerNameArray[count]){
if (LayerName.style){
LayerName.style.visibility = Visible;}
else{
LayerName.visibility = Visible;}
else{...

Something tells me I used a lot of unnecessary code throughout this project, but I think I finally understand what the DOM is and how to traverse through the document (for lack of a better phrase). Does anyone happen to know where I could find a thorough list of what is and is not supported by the different browsers? I did check the FAQ’s, but have not gotten a chance to go through the different links. If you happen to know a FAQ which would help, just point me in the right direction.

I may also be back to ask about the childen[] array and the childNodes[] array, but I need to do more research on my own first.

Thank you for your comments,
!ThisGuy