[thelist] advanced JS question - object scope issue perhaps

Tom Dell'Aringa pixelmech at yahoo.com
Mon Apr 18 10:30:48 CDT 2005

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);
		oContainer = document.createElementNS ? document.createElementNS(sNameSpaceURI, "div") :
		oContainer.setAttribute("id", sContainerID);
		oContainer.className = sClassName;
		oContainer.style.display = "none";
	// 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){
		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(){
		oTimer = setTimeout(function(){oContainer.style.display = "block";}, nDelay);
	} else {
		oContainer.style.display = "block";

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

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);	

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

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





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

More information about the thelist mailing list