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?
JavaScript onload and hints
Moderator: General Moderators
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
check out jQuery -- you will likely find a plugin that does exactly what you're looking for already.
feyd | Please use
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]
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;
}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]Sure. You can visit my site at http://www.mordel.net.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
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.