Menu problem and IE5...

[pedro]

Hello all,

I'm having problems with some code that makes a expandable/collapsible tree menu from an unordered list. The script works fine in IE6 but in IE5 the menu doesn't display at all and returns the following error:

Line: 98
Char: 35
Error: Object doesn't support this property or method

I'm really hoping there is a workaround or fix to this as although I know there are a lot of menu scripts out there this one is perfect for me.

Thank you in advance,

Peter

CODE....

var menuItems = new Array()

function drawList(list,parent,level) {
if(!level) level = 1;

for(var i=0;i<list.items.length;i++) {
var newDiv = document.createElement("div");
newDiv.className = "menuItem menuLevel" + level + " menutext";
newDiv.appendChild(document.createTextNode(list.items[i].caption));
newDiv.href = list.items[i].href;
newDiv.level = level;

if(i==0 && level==1) newDiv.style.border = "";

Toolkit.Events.addListener(newDiv,"onmouseover",menuOver,newDiv);
Toolkit.Events.addListener(newDiv,"onmouseout",menuOut,newDiv);
Toolkit.Events.addListener(newDiv,"onclick",menuClick,newDiv);

if(list.items[i].subList!=null) {
var plus = document.createElement("div");
plus.level = level;

plus.className = "menuExpand menuExpandLevel" + level + " menutext";
plus.appendChild(document.createTextNode("+"));

Toolkit.Events.addListener(plus,"onmouseover",expanderOver,plus);
Toolkit.Events.addListener(plus,"onmouseout",expanderOut,plus);
Toolkit.Events.addListener(plus,"onclick",expanderClick,plus);

var children = document.createElement("div");
drawList(list.items[i].subList,children,level+1);
plus.target = children;

newDiv.appendChild(plus);
newDiv.appendChild(children);
}

if(list.items[i].className!="selected") {
newDiv.selected = false;
if(list.items[i].subList!=null) children.style.display = "none";
} else {
newDiv.selected = true;
newDiv.className = "menuItem menuSelected menuLevel" + level + " menutext";
}

menuItems.push({obj: newDiv, href: list.items[i].href});

parent.appendChild(newDiv);

}

return newDiv;
}

function init() {
var daList = document.getElementById("menu").getElementsByTagName("ul")[0];
daList.style.display = "none";

var list = new ListObject(daList);
var cont = document.getElementById("menu");
lastChild = drawList(list,cont);
//lastChild.style.borderBottom = "1px solid #272D2F";

document.getElementById("menu").style.height = (document.getElementById("content").offsetHeight-document.getElementById("menu").offsetTop) + "px";
document.getElementById("content").style.height = document.getElementById("contents").offsetHeight + "px";

document.getElementById("pageTitle").onclick = function() { location = "/"; }
document.getElementById("pageTitle").onmouseover = function() { window.status = "http://pupius.co.uk/"; }
document.getElementById("pageTitle").onmouseout = function() { window.status = ""; }
}


function menuOver(e) {

this.className = "menuItem menuLevel" + this.level + "Over menutext";
window.status = this.href;
Toolkit.Events.cancelEvents(e);
}

function menuOut(e) {
if(this.selected) this.className = "menuItem menuSelected menuLevel" + this.level + " menutext";
else this.className = "menuItem menuLevel" + this.level + " menutext";
window.status = "";
e.stopPropagation();
}

function menuClick(e) {
location = this.href;
//alert(this.level);
e.stopPropagation();
}

function expanderOver(e) {
this.className = "menuExpand menuExpandLevel" + this.level + "Over menutext";
e.stopPropagation();
}


//error point's to next line
function expanderOut(e) {
this.className = "menuExpand menuExpandLevel" + this.level + " menutext";
e.stopPropagation();
}

function expanderClick(e) {
if(this.target.style.display == "none") this.target.style.display = "block";
else this.target.style.display = "none";

e.stopPropagation();
}

[Roy Sinclair]

But which line in the code you posted is the one that the error is pointing to?

[pedro]

Sorry, just edited the post to make it more clear...

It's the line that starts,

function expanderOut(e) {

but I really can't see what's wrong here at all?!

[Roy Sinclair]

I think it's a handler problem, try changing this line:

e.stopPropagation();

to

if (e.stopPropagation) e.stopPropagation();

[pedro]

Hmmm... sorry this didn't work, I replaced all instances of this line but to no avail. Thank you for trying.