[thelist] Javascript setTimeout losing object properties

Iain iain at firelightning.com
Sat Jun 25 09:27:49 CDT 2005


Hi all,

This is the code that's causing me to tear my hair out:

function initialisePictureMenu()
{
	if (!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}
	var pictureMenu = document.getElementById('pictureMenu');
	var pictureMenuItems = pictureMenu.getElementsByTagName('li');

	for (var i = 0; i < pictureMenuItems.length; i++)
	{
		// Apply initial opacity value to all menu objects:
		setOpacity(pictureMenuItems[i], 50);
		// Attach event handlers to the menu items:
		pictureMenuItems[i].onmouseover = function() { fadeIn(this); }
		pictureMenuItems[i].onmouseout = function() { fadeOut(this); }
	}
}

function setOpacity(obj, opacity)
{
	// IE filter opacity:
	obj.style.filter = "alpha(opacity:" + opacity + ")";
	// Safari and Konqueror:
	obj.style.KHTMLOpacity = opacity / 100;
	// Old Mozilla and Firefox:
	obj.style.MozOpacity = opacity / 100;
	// CSS3 opacity for browsers that support it:
	obj.style.opacity = opacity / 100;
}

function fadeIn(obj)
{
	var opacity = obj.style.opacity * 100;
	if (opacity < 100)
	{
		opacity += 10;
		setOpacity(obj, opacity);
		setTimeout("fadeIn('" + obj + "')", 100);
	}
}

function fadeOut(obj)
{
	var opacity = obj.style.opacity * 100;
	if (opacity > 50)
	{
		opacity -= 10;
		setOpacity(obj, opacity);
		setTimeout("fadeOut('" + obj + "')", 100);
	}
}

window.onload = initialisePictureMenu;

When I mouseover the list items, the fadeIn() function only executes once and then I get errors telling me that obj.style has no properties.  The same happens on mouseout.  Could someone put me out of my misery and tell me what's wrong?

Thanks,

Iain



More information about the thelist mailing list