[thelist] advanced JS question - object scope issue perhaps

[Tom Dell'Aringa]

I'm working on a web application, and they have requested a dynamic help system. They want 'tool
tip' type help. I have taken the code from Nicer titles at
(http://neo.dzygn.com/archive/2003/12/nicer-titles) as a basis for what I am doing. That code is
great but I need to drop more data into the 'tool tip' than what a title attribute would allow -
essentially a paragraph of text. 

I've set this up as an object. The problem I am having is that it seems some variables appear to
be out of scope, and I'm not sure where I am making my mistake. 

Quick rundown on the code:

Set up the class:

function DynamicHelp(nDelay, sContainerID, sClassName) 
{
	var oTimer;
	var isActive = false;
	var nDelay;
	var sNameSpaceURI = "http://www.w3.org/1999/xhtml";
	
	if(!nDelay || nDelay <= 0){ nDelay = false;}
	if(!sContainerID){ sContainerID = "helpdiv";}
	if(!sClassName){ sClassName = "helpbox";}
	
	// write help div to page
	var oContainer = document.getElementById(sContainerID);
	if(!oContainer)
	{
		oContainer = document.createElementNS ? document.createElementNS(sNameSpaceURI, "div") :
document.createElement("div");
		oContainer.setAttribute("id", sContainerID);
		oContainer.className = sClassName;
		oContainer.style.display = "none";
		document.getElementsByTagName("body").item(0).appendChild(oContainer);
	}
	
	//=====================================================================
	// Method addElements (Public)
	//=====================================================================
	this.addElements = function addElements()
	{
		// find all elements that have a span attached
		var spanArray = document.getElementsByTagName("span");
		for(var i=0;i<spanArray.length;i++) 
		{
			// but grab only the 'help' spans
			if(spanArray[i].className == "help")
			{
				// attach events
				addEvent(spanArray[i], 'mouseover', show);
				addEvent(spanArray[i], 'mouseout', hide);
				addEvent(spanArray[i], 'focus', show);
				addEvent(spanArray[i], 'blur', hide);
			}
		}
	}
}

The addElements() method is where I grab every span that has a class of 'help' and add the events.
Up to this point, everything is working fine. Those methods are called on mouseover etc:

function addEvent(obj, evType, fn){
	if(obj.addEventListener){
		obj.addEventListener(evType, fn, false); 
		return true;
	} else if (obj.attachEvent){
		var r = obj.attachEvent('on'+evType, fn);
		return r;
	} else {
		return false;
	}
}

function show(){
	if(nDelay){	
		oTimer = setTimeout(function(){oContainer.style.display = "block";}, nDelay);
	} else {
		oContainer.style.display = "block";
	}
}

function hide(){
	oContainer.style.display = "none";
	clearTimeout(oTimer);
}

My error is showing up in the show() method. the vars nDelay and oContainer seem to be out of
scope :

"Error: oContainer is not defined" - of course it is defined in the class, but this method is not
seeing that. Below is how I am writing it out to the page:

DynamicHelp.autoCreation = function()
{
	if(!document.getElementsByTagName){ return; } //not supported
	DynamicHelp.autoCreated = new Object();
	DynamicHelp.autoCreated.help = new DynamicHelp(600);	
	DynamicHelp.autoCreated.help.addElements();
}

addEvent(window, "load", DynamicHelp.autoCreation);


You can see the complete page (all code inline) at:

http://www.pixelmech.com/rev/help2.html

TIA

Tom




http://www.pixelmech.com/

Melissa: Ace, Where are you?
Ace Ventura: I'm in Psychoville and Finkle's the Mayor.