...

View Full Version : cursor's position



shlagish
06-18-2004, 10:12 PM
Is there some way of finding the cursor's position?
My objective is to make a js tooltip that appears just beside the mouse when you mouse over certain words.
my current code:


<html>
<head>

<title>Tooltips</title>

<style type="text/css">
<!--

#wordMeaning { background: #FF0;
border: 1px solid #000;
position: absolute;
display: none;
}

-->
</style>
<script type="text/javascript">
<!--

function getMeaning(word){

var words=new Array();
words["rabbit"]="<strong>furry</strong> animal";
words["frog"]="<strong>slimey</strong> animal";

var tooltip=document.getElementById("wordMeaning");
tooltip.innerHTML=words[word];
tooltip.style.display="block";
tooltip.style.top=CURSOR'S POSITION+10px;
tooltip.style.left=CURSOR'S POSITION;
}

function closebox(){

document.getElementById("wordMeaning").style.display="none";
}

//-->
</script>
</head>
<body>
<div id="wordMeaning"></div>
<p>I like <span onmouseover="getMeaning('rabbit');" onmouseout="closebox()">Rabbits</span> and <span onmouseover="getMeaning('frog');" onmouseout="closebox()">Frogs</span>.</p>
</body>
</html>


And if you know of any better way of making a tooltip, please do tell me. The only thing I need to keep here is this part:


var words=new Array();
words["rabbit"]="<strong>furry</strong> animal";
words["frog"]="<strong>slimey</strong> animal";

That's because I will be writting this array with PHP by getting the info out of a database.

Thank you in advance :)

SlySecretSpy
06-18-2004, 11:00 PM
Here is a DOM method, gets the positioning off the text not the mouse, and it creates an actual element and does not use the div that you added. I only spent a few seconds, you might want to change whats in the contents of the div that floats. You also might want to make it not require spans, and instead open the page, then search the getElementById('body').innerHTML for words based on your config file then generate the appropriet spans dynamicaly. That way you can just add the one include tag at the top of any page.


<html>
<head>

<title>Tooltips</title>

<script type="text/javascript">
<!--

function getMeaning(word){

var words=new Array();
words["rabbit"]="furry animal";
words["frog"]="slimey animal";

popup = document.createElement('div');
popup.setAttribute("id",word+"id");
popup.style.border = "1px solid #000000";
popup.style.display = "inline";
popup.style.color = "#000000";
popup.style.position = "absolute";
popup.style.backgroundColor = "#FFFFCC";
popup.style.top= "-5px";
popup.style.fontWeight="bold";
popuptext = document.createTextNode(" "+words[word]+" ");
popup.appendChild(popuptext);
document.getElementById(word).appendChild(popup)
}

function closebox(word){
document.getElementById(word).removeChild(document.getElementById(word+"id"));
}

//-->
</script>
</head>
<body>
<p>I like <span onmouseover="getMeaning('rabbit');" onmouseout="closebox('rabbit')" id="rabbit">Rabbits</span> and <span onmouseover="getMeaning('frog');" onmouseout="closebox('frog')" id="frog">Frogs</span>.</p>
</body>
</html>

Bobo
06-18-2004, 11:04 PM
<Script>
function P(ER) {
var XMpos=(ER||event).clientX;
var YMpos=(ER||event).clientY;
}
document.onMouse[cursorEventHandlerOfYourChoiceHere]=P
</script>

shlagish
06-19-2004, 03:00 AM
SlySecretSpy:
There are a couple of problems with your method.
Firstly, by using the createTextNode funcion, I can't have html tags in my words[] arrays... I need html tags, I will ultimatly have lists in there..
Is there a other funcion I could use to create a node that accepts html tags?

Secondly, the position is NOT positionned off the text, it's positionned off the window... your using position: absotule;
I could use position relative, but if I do, when the box appears, all the text at the right of it gets pushed..

I also thought about creating an actual element, but I thought it was more trouble for nothing...
Is it really better to create an element instead of using an existing one?
Thanks for you time though :)


Bobo:
I don't really understand..


<script type="text/javascript">
<!--

function P(ER) {

var XMpos=(ER||event).clientX;
var YMpos=(ER||event).clientY;
}
document.onmousemove=P;
</script>

You're saying this would work?
I think not...
Could you please explain ?

shlagish
06-19-2004, 03:30 AM
WOW, it does work!
I have made it, but it's weird..


<html>
<head>

<title>Tooltips</title>

<style type="text/css">
<!--

#wordMeaning { background: #FF0;
border: 1px solid #000;
position: absolute;
display: none;
}
#wordMeaning h1 { border: 1px solid #000; margin-top: 0; }
.Glossary { cursor: pointer; }

-->
</style>
<script type="text/javascript">
<!--

function getMeaning(word){

var words=new Array("rabbit","frog");
words["rabbit"]=new Array("rabbit","<strong>furry</strong> animal");
words["frog"]=new Array("frog","<strong>slimey</strong> animal");

var tooltip=document.getElementById("wordMeaning"), Xpos=mX+15, Ypos=mY;
tooltip.innerHTML="<h1>"+words[word][0]+"</h1>"+words[word][1];
tooltip.style.display="block";
tooltip.style.top=Ypos+"px";
tooltip.style.left=Xpos+"px";
}


function closeMeaning(){

document.getElementById("wordMeaning").style.display="none";
}

function moveMeaning(){

var tooltip=document.getElementById("wordMeaning"), Xpos=mX+15, Ypos=mY;
tooltip.style.top=Ypos+"px";
tooltip.style.left=Xpos+"px";

}

var mX, mY;
function getMousePos(e){

mX=(e||event).clientX;
mY=(e||event).clientY;
}

document.onmousemove=getMousePos;
//-->
</script>
</head>
<body>
<div id="wordMeaning"></div>
<p>I like <span class="Glossary" onmouseover="getMeaning('rabbit');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Rabbits</span> and <span onmouseover="getMeaning('frog');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Frogs</span>.
</p>
</body>
</html>

problems:
when a box appears and moves over some other text, that text becomes ugly... it gets distortionned...
dunno why.

also, I'm using my floating div technique here, maybe it would be better to create a new element?

What do you all think?

and Bobo, could you explain exactly what this does:
(ER||event).clientX
?

shlagish
06-19-2004, 04:25 AM
I took a screenshot to illustrate the distortion problem (happens in firebird but not in IE).
I have attached it to this message.

shlagish
06-19-2004, 05:58 AM
I finished it.
There are still the 2 problems explained in my last post, but I added a feature.
oh, and I'm using window.screen.availWidth..
Is there a way to have it for the document instead of the screen..
to make it get the width of only that page even if it is framed...
Tell me what you think.
I wouldn't mind you telling me how to make it faster/more efficient/less code/more semantically correct/etc..
in fact i'd love it :)
here it is


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />

<title>Tooltip</title>

<style type="text/css">
<!--
#right { text-align: right; }
#center { text-align: center; }
#wordMeaning { background: #FF9;
border: 1px solid #000;
position: absolute;
display: none;
min-width: 250px;
}
#wordMeaning h1 { border: 1px solid #000; margin: 0; font-size: 1.2em; background: #CC0; padding: 0 .3em; }
#wordMeaning div { padding: .5em; }
.Glossary { cursor: pointer; color: #F00; text-decoration: underline; }

-->
</style>
<script type="text/javascript">
<!--

function getMeaning(word){

var words=new Array("rabbit","frog");
words["rabbit"]=new Array("rabbit","<ol><li>Very prolific mammel which digs terriers in sandy and buchy terrains. <cite>The forest houses many animals such as <strong>rabbits</strong>.</cite></li><li>Furry, very cuddly, animal which lives in the forest. <cite>Look at the <strong>rabbit</strong>!</cite></li></ol>");
words["frog"]=new Array("frog","<ol><li>Very slimy animal which is most often green and yellow. <cite>You look like a <strong>frog</strong>.</cite></li><li>One can be froggy, I guess. I wouldn't know what it means. <cite>Your such a <strong>frog</strong>.</cite></li></ol>");

var tooltip=document.getElementById("wordMeaning");
if(mX<window.screen.availWidth-267){
var Xpos=mX+15;
tooltip.style.left=Xpos+"px";
}
else {
var Xpos=window.screen.availWidth-267;
tooltip.style.left=Xpos;
}
var Ypos=mY+10;
tooltip.style.top=Ypos+"px";
tooltip.innerHTML="<h1>"+words[word][0]+"</h1>"+words[word][1];
tooltip.style.display="block";
}

function moveMeaning(){

var tooltip=document.getElementById("wordMeaning");
if(mX<window.screen.availWidth-267){
var Xpos=mX+15;
tooltip.style.left=Xpos+"px";
}
else {
var Xpos=window.screen.availWidth-267;
tooltip.style.left=Xpos;
}
var Ypos=mY+10;
tooltip.style.top=Ypos+"px";
}

function closeMeaning(){

document.getElementById("wordMeaning").style.display="none";
}


var mX, mY;
function getMousePos(e){

mX=(e||event).clientX;
mY=(e||event).clientY;
}

document.onmousemove=getMousePos;
//-->
</script>
</head>
<body>
<div id="wordMeaning"></div>
<div id="right"><p>I like <span class="Glossary" onmouseover="getMeaning('rabbit');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Rabbits</span> and <span class="Glossary" onmouseover="getMeaning('frog');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Frogs</span>.I like <span class="Glossary" onmouseover="getMeaning('rabbit');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Rabbits</span> and <span class="Glossary" onmouseover="getMeaning('frog');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Frogs</span>.I like <span class="Glossary" onmouseover="getMeaning('rabbit');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Rabbits</span> and <span class="Glossary" onmouseover="getMeaning('frog');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Frogs</span>.</p></div>

<div id="center"><p>I like <span class="Glossary" onmouseover="getMeaning('rabbit');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Rabbits</span> and <span class="Glossary" onmouseover="getMeaning('frog');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Frogs</span>.</p></div>

<div><p>I like <span class="Glossary" onmouseover="getMeaning('rabbit');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Rabbits</span> and <span class="Glossary" onmouseover="getMeaning('frog');" onmousemove="moveMeaning();" onmouseout="closeMeaning()">Frogs</span>.</p></div>

</body>
</html>


Thanks for all your precious help :)

SlySecretSpy
06-19-2004, 06:49 AM
Oops, I did not even put the right copy on thier. I'll have to upload the final copy from work on monday. Sorry about that, I gave you one I was half done with.

shlagish
06-19-2004, 05:30 PM
But until then, what do you think of the version I presently have?

shlagish
06-20-2004, 10:02 PM
Latest version of my code:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />

<title>Tooltip</title>

<style type="text/css">
<!--
#right { text-align: right; }
#center { text-align: center; }
#wordMeaning { background: #FF9;
border: 1px solid #000;
min-width: 250px;
position: absolute;
display: none;
}
#wordMeaning h1 { background: #CC0;
border: 1px solid #000;
font-size: 1.2em;
margin: 0;
padding: 0 .3em;
}
#wordMeaning div { padding: .5em; }
.Glossary { cursor: pointer;
color: #F00;
text-decoration: underline;
}

-->
</style>
<script type="text/javascript">
<!--
var words=new Array("Rabbit","Frog"), desc=new Array(), mX, mY;

desc["Rabbit"]=new Array("Rabbit","<ol><li>Very prolific mammel which digs terriers in sandy and buchy terrains. <cite>The forest houses many animals such as <strong>rabbits</strong>.</cite></li><li>Very cuddly pet often given to children at birthdays or christmas. <cite>I bought you a nice <strong>rabbit</strong>!</cite></li></ol>");

desc["Frog"]=new Array("Frog","<ol><li>Very slimey animal which hops and makes noises. <cite>Look at that green <strong>Frog</strong>.</cite></li><li>adj. One can be froggish, I guess. <cite>Your such a <strong>Frog</strong>.</cite></li></ol>");


function getMeaning(word){

var tooltip=document.getElementById("wordMeaning");
var Xpos=(mX<window.screen.availWidth-267)?mX+15:window.screen.availWidth-267;
var Ypos=mY+10;

tooltip.style.left=Xpos+"px";
tooltip.style.top=Ypos+"px";
tooltip.style.display="block";
tooltip.innerHTML="<h1>"+word+"</h1>"+desc[word][1];
}

function moveMeaning(){

var tooltip=document.getElementById("wordMeaning");
var Xpos=(mX<window.screen.availWidth-267)?mX+15:window.screen.availWidth-267;
var Ypos=mY+10;

tooltip.style.top=Ypos+"px";
tooltip.style.left=Xpos+"px";
}

function closeMeaning(){

document.getElementById("wordMeaning").style.display="none";
}



function getMousePos(e){

mX=(e||event).clientX;
mY=(e||event).clientY;
}

function makeTooled(){

var theHTML=document.getElementById("theBody").innerHTML;

for(var i=0;i<words.length;++i){
theHTML = theHTML.replace(new RegExp(words[i],"gi"),'<span class="Glossary" onmouseover="getMeaning(\''+words[i]+'\');" onmousemove="moveMeaning();" onmouseout="closeMeaning();">'+words[i]+'</span>');
}

document.getElementById("theBody").innerHTML=theHTML;
}


window.onload=makeTooled;
document.onmousemove=getMousePos;

//-->
</script>
</head>
<body id="theBody">

<div id="wordMeaning"></div>
<div id="right"><p>I like rabbit and frogs.I like rabbits and frogs.I like rabbits and frogs.</p></div>
<div id="center"><p>I like Rabbits and Frogs.</p></div>
<div><p>I like Rabbits and Frogs.</p></div>

</body>
</html>

Problems:


distortion effect...
I'm not "creating" a new element to display the meaning of the words, I'm using an already-existing <div>. I'm not sure this is indeed a problem though..


If I don't get any more input, this is the version I will use :)
The arrays "words" and "desc" will be created by php by getting the words with their descriptions from a database.

shlagish
06-26-2004, 05:23 AM
Well, I updated the code and made a few fixes. I'm happy with it now. I'll post it here in case anyone is interested:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />

<title>Tooltip</title>

<style type="text/css">
<!--
#right { text-align: right; }
#center { text-align: center; }
#wordMeaning { background: #FF9;
border: 1px solid #000;
min-width: 250px;
position: absolute;
display: none;
}
#wordMeaning h1 { background: #CC0;
border: 1px solid #000;
font-size: 1.2em;
margin: 0;
padding: 0 .3em;
}
#wordMeaning div { padding: .5em; }
.Glossary { cursor: pointer;
color: #F00;
text-decoration: underline;
}

-->
</style>
<script type="text/javascript">
<!--
var desc=new Array(),
mX,
mY,
words=["Rabbit","Frog",];

desc["Rabbit"]="<ol><li>Very prolific mammel which digs terriers in sandy and buchy terrains. <cite>The forest houses many animals such as <strong>rabbits</strong>.</cite></li><li>Very cuddly pet often given to children at birthdays or christmas. <cite>I bought you a nice <strong>rabbit</strong>!</cite></li></ol>";

desc["Frog"]="<ol><li>Very slimey animal which hops and makes noises. <cite>Look at that green <strong>Frog</strong>.</cite></li><li>adj. One can be froggish, I guess. <cite>Your such a <strong>Frog</strong>.</cite></li></ol>";


function closeMeaning(){

document.getElementById("wordMeaning").style.display="none";
}

function moveMeaning(){

var tooltip=document.getElementById("wordMeaning"),
Xpos=(mX<document.body.clientWidth-267)?mX+15:document.body.clientWidth-267,
Ypos=mY+20;

tooltip.style.top=Ypos+"px";
tooltip.style.left=Xpos+"px";
}

function getMeaning(word){

var tooltip=document.getElementById("wordMeaning"),
Xpos=(mX<document.body.clientWidth-267)?mX+15:document.body.clientWidth-267,
Ypos=mY+20;

tooltip.style.left=Xpos+"px";
tooltip.style.top=Ypos+"px";
tooltip.style.display="block";
tooltip.innerHTML="<h1>"+word+"</h1>"+desc[word];
}

function getMousePos(e){

mX=(document.all)?event.offsetX:e.clientX+window.scrollX;
mY=(document.all)?event.offsetY:e.clientY+window.scrollY;
}

function makeTooled(){

var theHTML=document.body.innerHTML, i;

for(i=0;i<words.length;++i){
theHTML = theHTML.replace(new RegExp(":"+words[i]+":","gi"),'<span class="Glossary" onmouseover="getMeaning(\''+words[i]+'\');" onmousemove="moveMeaning();" onmouseout="closeMeaning();">'+words[i]+'</span>');
}
document.body.innerHTML=theHTML;
}


window.onload=makeTooled;
document.onmousemove=getMousePos;

//-->
</script>
</head>
<body>

<div id="wordMeaning"></div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>

<div id="right"><p>I like :RaBbit:s and :FroG:s. I like :rabbit:s and :frog:s. I like :rabbit:s and :frog:s.</p></div>
<div id="center"><p>I like :Rabbit:s and :Frog:s.</p></div>
<div><p>I like :Rabbit:s and :Frog:s, hate Frogs though.</p></div>
<div>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>
<p>make page scroll</p>

</div>

</body>
</html>

Bobo
12-12-2004, 03:02 AM
This was an accidental post... please ignore it.

Bobo
12-12-2004, 03:03 AM
WOW, it does work!

...and Bobo, could you explain exactly what this does:
(ER||event).clientX
?
(ER||event) is an object w/ all the props of the event.
"||" means 'or', and since some browsers support dif. things, "ER" would be if it only supports events given through arguments and "event" would be if it supports the event prop. of 'window'. IE supports both, I think. clientX/Y is the distance from the left/top of the doc. using offsetX/Y would get you the dist from the left/top of the element you're over. screenX/Y is the dist. from the left/top of the window or monitor ( I forget which). Finally, just plain X/Y is the same as clientX/Y, I think.

shlagish
12-12-2004, 09:09 PM
I waited a long time for that reply, lol. Thanks though :)

Bobo
12-12-2004, 10:41 PM
I kinda forgot 'bout this thread... :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum