I hope this is a simple problem and I'm just not seeing it...
I am doing a layer hide/show but I want to toggle the layer off/on as a method, ie in the event handler I call "thisObject.toggle()". It works great in IE5 and Netscape6 but not the level 4 browsers. The error message is that thisObject.toggle is not a function.
I initialise all the objects 'onLoad' and at this point all the objects properties are fine BUT once I try to access any object properties from an event handler they are undefined. The same code works in IE5 and Netscape6.
First question: r u using the correct DOM to address the layers?
Since it is working in IE5 and NS6, but not the others, I have to assume u r using the W3C-DOM and nothing else. If u create a complete cross browser script, that is taking into account old proprietory object models, then it should work.
OK. The problem's not in addressing the layers, I can hide/show if I my toggle function isn't an object method.
I'll include the code I think is relevant. The problem seems to be in the way I've constructed the objects, like, I can't call the methods or grab properties. The error in the javascript panel reads "menu1.toggle is not a function"
function getStyle(name){ //returns the style object for each major DOM
if (document.getElementById) return document.getElementById(name).style;
else if (document.all) return document.all[name].style;
else if (document.layers) return document.layers[name];
}
function toggle(){ //closes all at lower levels and toggles this on/off
if (this.open) { this.hide();
for (i=tracker.length-1;i>=this.level-1;i--){
if (tracker[i]) tracker[i].hide();}
}
else{for (i=tracker.length-1;i>=this.level-1;i--){
if (tracker[i]) tracker[i].hide();}
this.show();
}
tracker[this.level-1]=this;
}
function show(){
var hidden=(document.layers)?'hide':'hidden';
var visible=(document.layers)?'show':'visible';
this.css.visibility=visible;
this.open=true;
}
function hide(){
var hidden=(document.layers)?'hide':'hidden';
var visible=(document.layers)?'show':'visible';
this.css.visibility=hidden;
this.open=false;
}
function init(){
menu1=new menuObject('menu1',1);
menu2=new menuObject('menu2',1);
//etc...
}
var menu1, menu2, menu3, menu1_1, menu1_2, menu1_3; //these are my global menu handles
<!------THIS IS THE LAYER I'M TRYING TO TOGGLE----------->
<div id="menu1" class="menuClass">
<center><b>MENU ONE</b><hr></center>
<a href="#" onclick="menu1_1.toggle()">One Menu 1</a>
</div>
Bookmarks