Page 1 of 1

JavaScript onload and hints

Posted: Sun Feb 25, 2007 8:25 pm
by SBukoski
I have some javascript that shows a hint when the user mouses over an image. The actual hint object is not created until the onLoad event. What this means is that if the user should end up putting the mouse over the image (usually accidentally) before the page is fully loaded, I get a "is not defined" error since the object has obviously not yet been created.

While this doesn't lead to any actual PHP errors and the page works fine when the page is loaded, is there anything that can be done to prevent this type of javascript?

Posted: Sun Feb 25, 2007 8:58 pm
by volka
Is there a good reason to create element complete in the onload-handler?

Posted: Mon Feb 26, 2007 4:40 am
by Kieran Huggins
check out jQuery -- you will likely find a plugin that does exactly what you're looking for already.

Posted: Mon Feb 26, 2007 2:08 pm
by SBukoski
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


The actual JavaScript I did not write.  It is the ubertooltip code that is several years old but still works fine.  The reason the tip is not created until the onload event is because it needs to know certain things about the window such as sizing so it know where to place the div.  I don't think these things are readily available until then.  Here is the function to create a new tip:

[syntax="javascript"]
function uberToolTip(id, delay)
{
	this.id = id || "tipDiv";
	this.textId = "tipText";
	this.mouseX = 0;
	this.mouseY = 0;
	this.doit = false;
	this.obj = null;
	this.textObj = null;
	this.fader = null;
	this.delay = delay || 40;
	this.max = 90;
	
	this.getMouseX = function()
	{
		var coords = this.getScrollCoords();
		return this.mouseX + (d.all? coords[0] : 0);
	}

	this.getMouseY = function()
	{
		var coords = this.getScrollCoords();
		return this.mouseY + (d.all? coords[1] : 0);
	}

	this.show = function(html)
	{
		if (w.opera) return;
		this.doit = true;
		if (this.fader)
		{
			this.fader.setTrans(0);
			this.fader.fadeIn();
		}
		wdivo(this.textObj, html);
		this.update();
		sdivo(this.obj);
	}
	
	this.update = function()
	{
		// let's first put it all the way to the left to see how wide the DIV needs to be
		this.obj.style.left = "0px";
		
		var left = this.getMouseX() + 5;
		var top = this.getMouseY() + (d.all? 7: 2);
		if (this.obj.offsetWidth)
		{
			var w = this.getWinCoords();
			var s = this.getScrollCoords();
			var winb = w[1] + s[1];
			var winr = w[0] + s[0];
			if (top + parseInt(this.obj.offsetHeight) > winb)
			{
				top = winb - this.obj.offsetHeight;
			}

			if (left + parseInt(this.obj.offsetWidth) > winr - 20)
			{
				if (left - 5 - this.obj.offsetWidth < 0)
				{
					var newLeft = winr - this.obj.offsetWidth - 20;
					left = (newLeft < 0) ? 5 : newLeft;
				}
				else
					left = left - 5 - this.obj.offsetWidth;
				
			}
				
		}

		this.obj.style.left = left + "px";
		this.obj.style.top = top + "px";
	}

	this.getWinCoords = function()
	{
		var wx, hx;
		if (w.innerHeight)
		{
			wx = w.innerWidth;
			hx = w.innerHeight;
		}
		else if (d.documentElement && d.documentElement.clientHeight != 0)
		{
			wx = d.documentElement.clientWidth;
			hx = d.documentElement.clientHeight;	
		}
		else if (d.body && d.body.clientHeight)
		{
			wx = d.body.clientWidth;
			hx = d.body.clientHeight;
		}

		return [wx, hx];
	}

	this.getScrollCoords = function()
	{
  		var x = 0, y = 0;
  		if (typeof(w.pageYOffset) == "number")
		{
    		y = w.pageYOffset;
    		x = w.pageXOffset;
  		}
		else if (d.documentElement && d.documentElement.clientWidth != 0)
		{
        	y = d.documentElement.scrollTop;
        	x = d.documentElement.scrollLeft;
      	}
		else if (d.body && typeof(d.body.scrollLeft) != "undefined")
		{
      		y = d.body.scrollTop;
      		x = d.body.scrollLeft;
    	}
		return [x, y];
	}
	
	this.hide = function()
	{
		if (w.opera) return;
		hdivo(this.obj);
		this.doit = false;
		if (this.fader) this.fader.setTrans(0);
		this.obj.style.left = this.obj.style.top = 0;
		wdivo(this.textObj, "");
	}

	this.init = function()
	{
		if (d.layers || w.opera) return;
		this.obj = d.getElementById(this.id);
		this.textObj = d.getElementById(this.textId);
		if (!this.obj)
		{
			return;
		}
		this.loaded = true;
		if (w.ckapi && (d.all || (d.getElementById && d.addEventListener)))
		{
			this.fader = new ckapi(this.id, this.delay, this.max);
			this.fader.setTrans(0);
		}	
	}
	
	this.mouseMove = function(e)
	{
		var x, y;
		if (w.event)
		{
			x = event.clientX + d.body.scrollLeft;	
			y = event.clientY + d.body.scrollTop;
		}
		else
		{
			x = e.pageX;
			y = e.pageY + 10;
		}
		this.mouseX = x;
		this.mouseY = y;
		if (this.obj && this.doit) this.update();
	}
	
	return this;
}
I didn't include any supporting functions for the sake of space and sanity.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Feb 26, 2007 2:56 pm
by Nathaniel
Could you post a working example of this bug occurring? It would probably be easier to help you out if we could replicate the error ourselves.

Cheers!
- Nathaniel

Posted: Mon Feb 26, 2007 5:13 pm
by SBukoski
Nathaniel wrote:Could you post a working example of this bug occurring? It would probably be easier to help you out if we could replicate the error ourselves.

Cheers!
- Nathaniel
Sure. You can visit my site at http://www.mordel.net.

You'll notice the navigation menu near the top has some images on it. Those images have tips associated with them. Place your browser about where the image appears and refresh the page. If the mouse touches the image before the window is finished loading it will generate a javascript error.