Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

display text at mouse in Firefox - please help 1

Status
Not open for further replies.

robmapes

Programmer
Apr 22, 2009
2
US
I have a requirement to display text at the mouse position when I fire the onMouseOver event. I can find the mouse coordinates. I am using a div for the text. I can make the code work for IE but not for Firefox. In Firefox, the text is displayed in upper left corner of page, seems to refuse the top and left parameters for position:absolute. I used alerts and the skn.left and skn.top variables are not being populated. I don't know why Firefox cannot recognize these equates. The code is listed below. Any suggestions as to what I am doing wrong??? A BIG TIA to ANYONE who can help me with this. I have been wrestling with this for 2 days. Obviously I am new to Javascript and CSS.


Code:
<style type="text/css"><!--// 
A:hover	{background:white;}
.box{font-family:Arial,sans-serif; font-size:smaller;}
  .boxpopup {
	font-family:Arial,sans-serif;font-size:70%;      /*POPUP FONT */
	color:#006; background:#FEF1B5;		/*COLOURS*/
        width:200px; text-align:center;			/*BOX WIDTH, CENTERED TEXT */
        padding:4px 5px 4px 5px; 			/*SPACE FROM TEXT TO BORDER*/
        font-weight:bold;	 			/* TEXT WEIGHT*/
        border:1px solid gray; 				/*POPUP BORDER*/
        }
  #pdqbox {position:absolute; visibility:hidden; z-index:200;}
//-->
</style>




</head>

<body>

<div id="pdqbox"></div>

<script TYPE="text/javascript"><!--// 
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

OffsetX=20; // MODIFY THESE VALUES TO
OffsetY=35;   // CHANGE THE POSITION.
var skn,yyy=-1000;

//Not really using these variables. 
// I know that document.all is BAD coding.
// But I am getting desparate...
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all

skn=document.getElementById("pdqbox").style;

  if (ns4) document.captureEvents(Event.MOUSEMOVE);
  else {
         skn.visibility="visible"
         skn.display="none"
       }
//  alert('skn='+skn);


document.onmousemove=get_mouse;

function fn_popup(msg){
  var content="<div class=boxpopup>"+msg+"</div>";
  yyy=OffsetY;
//  skn=document.getElementById("pdqbox").style;
  document.getElementById("pdqbox").innerHTML=content;
alert('skn='+skn)
  skn.display=';

}


function get_mouse(e){
// IE does not pass the event, while FireFox does

if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 

    if (e.pageX || e.pageY)
    { 
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';

      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      // Note: I am adding together both the "body" and "documentElement" scroll positions
      //       this lets me cover for the quirks that happen based on the "doctype" of the html page.
      //         (example: IE6 in compatibility mode or strict)
      //       Based on the different ways that IE,FF,Moz,Opera use these ScrollValues for body and documentElement
      //       it looks like they will fill EITHER ONE SCROLL VALUE OR THE OTHER, NOT BOTH 
      //         
      mousex = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      mousey = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }
  }
var x=mousex
var y=mousey

skn.left=x+OffsetX;
skn.top=y+yyy;
//document.getElementById("pdqbox").left=x+OffsetX;
//document.getElementById("pdqbox").top=y+yyy;
}


function fn_remove_popup(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
//else if (ns6||ie4)
skn.display="none"
}
//-->
</script> 


and then down further in the body...

<area	 shape="rect"
	coords="251,68,284,101"
        onMouseOver="fn_popup('We secure your valuables - Jimmys lock & Safe')"
	onMouseOut="fn_remove_popup()"
	href="[URL unfurl="true"]http://www.anyurl.com"[/URL]
	title="" alt=""/>
 
You are omitting the unit specifier, so the browser doesn't know whether you want pixels, points, ems, bacon, bananas, apples, pears, monkeys or bathtubs. Or even jam in a sock.

Assuming you want pixels, add the pixel unit specifier 'px' to the end of your units:

Code:
skn.left = (x + OffsetX) + 'px';
skn.top = (y + yyy) + 'px';

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
P.S. As you say, you're new to JS, so here's some great advice:

Ditch all that crappy browser detection, because Netscape 4 and IE 4 are at least 10 years old, and I'd be surprised if you have anyone visiting your site using those browsers. If you did, it would probably look bad anyway, given their rendering engines probably don't handle most modern layouts.

Stick with modern DOM methods and you can't go wrong.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
YES! Thanks, Dan! The problem was the 'px'. Interesting that IE7 did not require the 'px' as the code was working in IE7 just not if Firefox3.0.8. (However, I just don't understand why the browsers could not handle "jam in a sock.")

And, as you suggested, I have removed all of that old IE4 nonsense. A lot of that code was copied from a different forum (free code, I did not steal it...) and I cleaned it up. Good learning exercise for this JS newby.

Anyway, thanks again for your help.

[Some forums ask for feedback and points for the people who post. I don't know if this forum makes that request. If so, please let me know and I will definitely give you credit for solving my problem.]
 
That's excellent news on removing the redundant JS code. Smaller, cleaner, faster code is always nicer to have.

There's not really any points system here, just a 'Thank xxx for this valuable post' link at the bottom of every post. It simply marks a post as being helpful, which often is a good indicator for people searching for answers to problems.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top