Cursor position converted to css styling

@jnosterApr 29.2006

[code=php]function handlepopup(){ var solPopUp = document.getElementById(‘solPopUp’);

if(solutionshttp.readyState == 4){ addpopup(solPopUp, solutionshttp.responseText); } return; }

function addpopup(solPopUp,text,horz,vert){ var mouseX = event.clientX+”px”; var mouseY = event.clientY+”px”;

solPopUp.style.left = mouseX; solPopUp.style.top = mouseY; solPopUp.style.zindex = “15”; solPopUp.innerHTML = text; }

function topFive(queryline){ solutionshttp.open(‘get’, ‘solutionsquery.php?selectgroup=’+queryline); solutionshttp.onreadystatechange = handlepopup; solutionshttp.send(null); }[/code]

What I’m trying to do is make a tiny popup appear (not a web browser type, but if you’ve seen Netflix and how they work you’ll understand). This pop up will have information obviously built from a php script and displayed dynamically like AJAX.

The problem is the event handler. I know I’m doing something wrong because there is more to event capturing than this. I need the pop up to appear right near the cursor at the time of a mouseover. I’ve been able to get an alert to show me the cursor position but I’ve not been able to get those same numbers to work in a CSS style change. I keep getting type mismatch errors and event is not defined and such.

Any ideas and help would be appreciated.

Jim

to post a comment

JavaScript

2 Comments(s) _↴

@vwphillipsApr 29.2006 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 </head>
 
 <body>
 <script language="JavaScript" type="text/javascript">
 <!--
 var zxcEvt=0;
 var zxcObj;
 
 function PopUp(id,txt,sw){
 zxcObj=document.getElementById(id);
 if (!sw){ zxcObj.style.visibility='hidden'; zxcObj=null; return; }
 zxcObj.innerHTML=txt;
 zxcObj.style.visibility='visible';
 }
 
 function zxcMse(event){
 if(!event) var event=window.event;
 var zxcx,zxcy;
 if (document.all){ zxcx=event.clientX+zxcDocS()[0]; zxcy=event.clientY+zxcDocS()[1]; }
 else { zxcx=event.pageX,zxcy=event.pageY; }
 if (!zxcObj){ return; }
 zxcObj.style.left=(zxcx+5)+'px';
 zxcObj.style.top=(zxcy+5)+'px';
 }
 
 function zxcDocS(){
 var zxcsx,zxcsy;
 if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
 else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
 return [zxcsx,zxcsy];
 }
 
 function zxcEventAdd(zxco,zxct,zxcf){
 if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
 var zxcPrev=zxco['on'+zxct];
 if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
 else { zxco['on'+zxct]=zxco[zxcf]; }
 }
 }
 
 function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj[zxcevt+'add']){ return; }
 zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcobj[zxcevt+'add']=true;
 zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
 }
 
 zxcAddEvt(document,'zxcMse','mousemove');
 
 //-->
 </script>
 </body>
 <div  style="position:relative;width:100px;height:100px;background-color:red;"
 onmouseover="PopUp('PU','some text',true);"
 onmouseout="PopUp('PU');"
 ></div>
 
 
 <div id="PU" style="position:absolute;visibility:hidden;width:100px;height:100px;background-color:#FFFFCC;" ></div>
 </html>[/CODE]

@jnosterauthorApr 29.2006 — #thanks VW for your suggestion. I will have to look it over and see what I can get out of it.

I did find way of doing it that at least gets the pop up I want. Here is the code that's being called by this even handler... [code=php]onmouseover="init();topFive('$line[name]');" [/code] (This call was written in PHP so the $line is a call to an array)

Here is the code that works... well sortta..

[code=php]function uninit(popupwin){
 if (window.Event) {
 var mouseout = document.captureEvents(Event.MOUSEOUT);
 }
 if (mouseout){
 popupwin.style.zindex = "0";
 }
 }
 
 function init() {
 if (window.Event) {
 document.captureEvents(Event.MOUSEOVER);
 }
 document.onmouseover = getXY;
 }
 
 function getXY(e) {
 mouseX = (window.Event) ? e.pageX : event.clientX;
 mouseY = (window.Event) ? e.pageY : event.clientY;
 }
 
 function handlepopup(){
 var solPopUp = document.getElementById('solPopUp');
 
  if(solutionshttp.readyState == 4){
   addpopup(solPopUp, solutionshttp.responseText);
  }
 return;
 }
 
 function addpopup(solPopUp,text){
 
  solPopUp.style.left = "900px";
  solPopUp.style.top = mouseY;
  solPopUp.style.zindex = "15";
  solPopUp.innerHTML = text;
 }
 
 function topFive(queryline){
 solutionshttp.open('get', 'solutionsquery.php?selectgroup='+queryline);
 solutionshttp.onreadystatechange = handlepopup;
 solutionshttp.send(null);
 }[/code]

It works nicely but the "top" styling doesn't work in FF and I can't get it into the table cell I want. I'm looking for a way to get a kind of px return on the top of a table cell so I can position this more better. Also, once I get the thing to pop up I can't get it to go away. That's what I hope to find in your code, I'll look it over.

Also in #JavaScript _↴

Click link in iframe and open in another iframe detect screen then refer to another version.Refresh another browser window

Success!

Help @jnoster spread the word by sharing this article on Twitter...

Tweet This

Cursor position converted to css styling

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Cursor position converted to css styling

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴