JavaScript onload and hints

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

JavaScript onload and hints

Post 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?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

Is there a good reason to create element complete in the onload-handler?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

check out jQuery -- you will likely find a plugin that does exactly what you're looking for already.
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Post 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]
User avatar
Nathaniel
Forum Contributor
Posts: 396
Joined: Wed Aug 31, 2005 5:58 pm
Location: Arkansas, USA

Post 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
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Post 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.
Post Reply