Tooltip Problem

[Jona]

I hate to ask you guys questions, but this one is confusing me... Khalid, Dave, Pyro, any suggestions?

OK, so I have this tooltip script that I made. It works very nicely. I have one little problem, though... The tooltip pops up in the same location, instead of staying relevant to the event (event.x and event.y coordinates). So what I'm saying is, the top of the page is fine: the tooltip pops up ten pixels above and to the right of the cursor (onMouseMove). The next three or so links work fine, too. But when I scroll down a little, and mouseover any of the next links, the tooltip pops up a lot higher up. I don't understand why this is happening. It should be working fine after all.

I have put the page online here (http://geocities.com/god_loves_07/books.html). The function that makes the tooltip (not the code that clears it) is as follows (I've added comments to it for readability):


function popup(txt){
/*txt is the text to create in the popup*/
var t = event.srcElement;
/*this is a SPAN element with a title attribute incased in an anchor with the tooltip onmouseover/onmousemove*/
var d = document.getElementById("tooltip");
/*this is the div/tooltip*/
var x = event.x-10;
var y = event.y-10;
if(parseInt(navigator.appVersion)<4){return;}else{
d.style.top=y;
/*set the y-position of the div to the position of the mouse cursor*/
d.style.left=x;
/*same as above, just with teh x-coordinate*/
d.style.visibility="visible";
/*Make the div visible*/
d.innerHTML="<p align=justify style=width:240px>"+txt+"</p>";
/*Place the tooltip's contents*/
t.title="";
/*set the title attribute of the span element to nothing, so that the "alt" looking menu doesn't overlap the tooltip (this is so that browsers with JS disabled will see the title attribute and still be able to see some kind of tooltip)*/
} }


Jona

[Khalid Ali]

Originally posted by Jona

/*this is the div/tooltip*/
var x = event.x-10;
var y = event.y-10;
Jona

just make the following chnage and replace the lines qouted above with these lines

var scrollX = (document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
var scrollY = (document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
var x = event.x+10+scrollX;
var y = event.y+10+scrollY;

Oh BTW..it won't take much of an effort to make it work with NS...why not do that?

[Jona]

Originally posted by Khalid Ali
Oh BTW..it won't take much of an effort to make it work with NS...why not do that?

I always make the script at least work first in IE, then go on to making it work in other browsers like NS and Moz. Thanks, it works (in IE). ;)

Edit: OK, so about this Netscape compatibilty thing... :p
I keep getting the error "event" is undefined. I don't know why I am getting this error. Help me por favor. ;)

Originally posted by Dave Clark
For IE, this would be a matter if obtaining the position of the event.srcElement object (event.target in NS) -- relative to the document -- and then adding the event.offsetX and event.offsetY properties to that (NS doesn't have anything equivalent). The result is the coordinates of the mouse relative to the document.

That's what I was trying to accomplish with event.x and event.y. Unfortunately, it didn't work how I had planned. So how would I get the position of the srcElement? I tried event.srcElement.style.margin, event.srcElement.style.marginTop, and about 4 other different properties I found at the MSDN, but none of them worked--the ones that didn't return "undefined" returned "" or 0.

Jona

[Jona]

OK, thanks man. That's great. You two, pyro, Charles and jeffmott (although sometimes frustrating :rolleyes: ) are the best! ;)

Khalid, I posted a reply in the XML forum... Wondering if you read it yet...

Jona

[Jona]

Originally posted by Dave Clark
...[T]he following for NS6+

event.target.offsetLeft
event.target.offsetTop

What if NS6 says "event is undefined"? :rolleyes:

Jona

[Jona]

I have updated the link (http://geocities.com/god_loves_07/books.html) that I posted earlier. It has the source in it. The HTML used to call the popup() function is as follows:


<A HREF="#" onMouseOver="popup('This is a tooltip');" onMouseMove="popup('This is a tooltip');" onMouseOut="stoppop();">[Includes]</A>


The source of the .js file is as follows:


var t, d, scrollX, scrollY, x, y;

function popup(txt){
if(navigator.appName!="Netscape"){t=event.srcElement;}else{t=event.target;}
d = document.getElementById("tooltip");
scrollX = (document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;
scrollY = (document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop;
x = event.x+10+scrollX;
y = event.y+10+scrollY;
if(parseInt(navigator.appVersion)<4){return;}else{
d.style.top=y;
d.style.left=x;
d.style.visibility="visible";
d.innerHTML="<p align=justify style=width:240px>"+txt+"</p>";
t.title="";
} }

function stoppop(){
d=document.getElementById("tooltip");
d.style.visibility="hidden";
d.innerHTML="";
}


Jona

[Jona]

Still no go. I've updated the link (http://geocities.com/god_loves_07/books.html) I posted earlier (only the very first link works, though because I only updated the first one). It works fine in IE, but in Netscape, it doesn't. I get the error, "setting a property that only has a getter." I've added return true; to the end of both functions, and added the event variable passer (e.g., function popup(txt, event) and function stoppop(event)).

Thanks for the help so far,
Jona

[Jona]

I have no idea. Is it because in my code every time the mouse moves (while over the link) it re-updates the innerHTML of the "floating" DIV? I don't think that would cause a problem, though...

Edit: I've also noticed that the title attribute stays set, so that means that whenever the error occurs, it stops the function altogether and returns... And the error supposedly occurs on line 11, which is of no help because I know that line is not causing the error.

Jona

[Jona]

Originally posted by Dave Clark
Can you provide a live link?

Isn't: http://geocities.com/god_loves_07/books.html a "live" link, or am I missing something? What do you mean by "live"?

Jona

[Jona]

Onload? That is probably because the (free) testing server (Geocities) has ads on there, so they screw up almost every page you make. :p (It is free, though.)

Also, if you are talking about the error "srcElement" is undefined, it's not onload. It's when you mouseover the links. I haven't updated all of them, so none of them work, except for the first one (all the way at the top, right).

Jona

[Jona]

Yes, only in NS6.2.

Jona

[Jona]

Hmm... Are you sure you're not getting any errors? Make sure you don't have the Javascript error handler on (if there is one in NN7) because that debugs and makes the Javascript work sometimes (in IE anyway). In NS6.2, I type in javascript: in the address bar after I mouse over the link and it displays the results.

Jona

[Jona]

lol. I was talking about the option in IE that says, "Javascript debugging." That makes the code work sometimes when it's not entirely correct (am I right?). Anyways, I don't know if Netscape has that or not. Did you view the Javascript console? And you get no errors?

Jona

[Jona]

Originally posted by Dave Clark
Is this the line that is supposed to be causing the error?

scrollX = (document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft;

If so, change the name of your variable. NS must already have a read-only window.scrollX property that you are trying to set.

Yes! That's freaking it! All right, now the only thing is it appears at the top right corner...

Jona

[Jona]

Yeah, you probably did. Wait, you definitely did. I started doing this last year about this same time. :p

OK, Mr. I Rule JavaScript (and 20,000 other languages), :D what do I use to get the DIV to float around like it does in IE?

Jona ;)

[Jona]

Originally posted by Dave Clark
For IE, this would be a matter if obtaining the position of the event.srcElement object (event.target in NS) -- relative to the document -- and then adding the event.offsetX and event.offsetY properties to that (NS doesn't have anything equivalent). The result is the coordinates of the mouse relative to the document.

Notice the underlined part. If there is no event.offsetY or event.offsetX in NS, what do I use?

Jona

[Jona]

Make me figure it out on my own, eh? That's ok. I don't blame you. lol

I think I'll try event.pageX and event.pageY...

Edit: Not quite... :p I'll figure it out eventually and tell you when I've got it. Thanks for the help. ;)

Jona

[Jona]

I made a small script that onmousemove of one div moves another div to the corresponding event.pageY movement for NS. It works! But when I test it in my code it doesn't. I mean, it's just like event.y but in IE it works and NS it doesn't. I'll post the *new* code... (Note: I used absolute positioning and it works in IE but in NS it doesn't, but it updates the innerHTML which comes after the positioning in the code!)


function popup(txt, event){
d = document.getElementById("tooltip");
//d.style.top=event.pageY;
sX = (document.documentElement) ? document.documentElement.scrollLeft : 0; //window.innerWidth-event.pageX;
sY = (document.documentElement) ? document.documentElement.scrollTop : 0;
//window.innerHeight-event.pageY
if(navigator.appName!="Netscape"){t=event.srcElement; x=event.x+10+sX; y=event.y+10+sY;}
else{t=event.target; x=event.pageX+10+sX; y=event.pageY+10+sY;}
if(parseInt(navigator.appVersion)<4){return;}else{
d.style.top=200;
d.style.left=200;
d.style.visibility="visible";
d.innerHTML="<p align=justify style=width:240px>"+txt+"</p>";
t.title="";
return true;
} }

function stoppop(event){
d=document.getElementById("tooltip");
d.style.visibility="hidden";
d.innerHTML="";
return true;
}


Jona

[Jona]

Mesa confuzzled. :rolleyes: I'm not sure what this "idea" happens to be, but in any case I can tell you're tired of helping me. I think I ask too much from you, rather than from the forum in its entirety... How would we bring Khalid's attention to this thread? :D (He did suggest that it's "not that hard" to make it work in NS, after all.)

Jona

[Jona]

OK, I didn't know that was acceptible (didn't want to get in "trouble" :D).

Jona

[Jona]

lol, Okay, it looks like you're pretty confident that Khalid knows the answer to this. Thanks for all the help. :D :D

Jona