Forum Moderators: open

Message Too Old, No Replies

DHTML Folder tree menu

JavaScript error in IE, but not in Firefox

         

SilverLining

11:35 am on Mar 9, 2007 (gmt 0)

10+ Year Member



My knowledge of JavaScript is very limited, let alone DHTML. I have used an example from Sitepoint to create a folder tree, which works great.

However IE displays a JS error, which does not get picked up by Firefox. The limited description of the error is:

'undefined' is null or not an object

Here are two extracts from the JS file:


function attachEventListener(target, eventType, functionRef, capture)
{
if (typeof target.addEventListener!= 'undefined')
{
target.addEventListener(eventType, functionRef, capture);
}
else if (typeof target.attachEvent!= 'undefined')
{
target.attachEvent('on' + eventType, functionRef);
}
else
{
eventType = 'on' + eventType;
if (typeof target[eventType] == 'function')
{
var oldListener = target[eventType];
target[eventType] = function()
{
oldListener();
return functionRef();
}
}
else
{
target[eventType] = functionRef;
}
}
return true;
}


attachEventListener(a, 'keyup', function(e)
{
if (!isreset && e.keyCode == 9)
{
displayReset(tree);
}
}, false);
var moves = 0;
attachEventListener(a, 'mousemove', function()
{
if (!isreset)
{
moves++;
if (moves > 2) { displayReset(tree); }
}
}, false);

Do I need to post any more code to steer you in the direction of helping me find the solution? The HTML is an unordered list inside another unordered list e.g.


<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
<li></li>
<li></li>
</ul>

Thank you in advance.

SilverLining

4:11 pm on Mar 9, 2007 (gmt 0)

10+ Year Member



Found the problem, thanks to Firebug (and some help from another developer). I had a placeholder
li
in the first unordered list, which contained no content.

I have another question though.

On loading the Menu the links are all 'minimised'. When the "plus" button is clicked, the links expand. How can I change this and ensure that certain menus are expanded onload? I have tried adding

display:block;
in the CSS, but this does not work.

Have also tried this, which should work, but does not:


var uls = document.getElementsByTagName('ul');
alert('ul[1].style.display"' + uls[1].style.display + '"');
uls[1].style.display = 'block';
uls[2].style.display = 'block';

Alert shows that the ul has no display properties assigned to it. I would like uls[1] and uls[2] to be expanded and the rest of the uls minimised.

Here is the function which switches between displays:


function displayReset(tree)
{
var menus = tree.getElementsByTagName('ul');
for (var i = 0; i < menus.length; i++)
{
if (menus[i].style.position!= 'static')
{
menus[i].style.display = 'none';
}
menus[i].style.position = 'static';
}
isreset = true;
}