DHTML Tree Cross-Browser Problem

[levid]

Hi,

I am trying to make a JS tree that turns span groups on and off by clicking on the plus or minus icons which you can try in this example -

http://www.levid.com/clients/amped/ampedtree2.htm

That same tree structure is also being implemented as the nav system for the news filter on this website with some slight modifications - http://www.levid.com/clients/amped/demos3.htm

If you are using IE it should work fine, but it doesn't work correctly in Mozilla which is what I am trying to figure out now. My problem lies in one line of code that set the image ID's of the plus/minus icons to "off" so that only the active tree node remains open. I have a looping script that turns all of the spans off except for the node you click on defined by the ID in the plus and minus icons. The piece of code that is creating the error is:

var sp = document.getElementsByTagName("span" ;

document.getElementById(sp[ids].className).id = 'off';

The error I get in Mozilla when trying to active the tree is: Error: document.getElementById(sp[ids].className) has no properties
Source File: http://www.levid.com/clients/amped/library/function4.js
Line: 266

If I want to get it to work correctly in Mozilla, I have to use this syntax instead:

document.images[sp.className].id = 'off';

And the error IE gives me in return is: Error: 'document.images[...]' is null or not an object.

I need to know how to "define" properties for elements and events in Javascript if that is possible. I can't find much documentation on this subject, so if anyone has a solution or suggestion for this problem it would help me out a lot. I'm almost to the point where I am just going to detect which browser the viewer is using and make separate calls based on that so the tree will work correctly in both, but I think this can be solved another way.

Thank you,

-Isaac T. Wooten
Designer / Developer
Levid Media
http://www.levid.com - http://media.levid.com

[sad69]

If I were you, I would to a check if the browser is IE or NN, and use the appropriate code accordingly.

I know it seems like a quick fix, but I've seen this all over the net. Until both of these browsers use the same standards, this is the only solution that I can think of.

I think you check for browsers like this:

var browser = '';
if (navigator.appName.indexOf('Microsoft') != -1)
 browser = 'IE'
else if (navigator.appName.indexOf('Netscape') != -1)
 browser = 'Netscape'
else 
 browser = 'IE';

Hope that helps,
Sadiq.

[levid]

Thanks for the insight Sadiq. I think you may be right, there aren't a whole lot of options with both browsers having different standards. I'll give it a try