By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,688 Members | 1,715 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,688 IT Pros & Developers. It's quick & easy.

Popup/tooltip doesn't work with Mozilla

100+
P: 258
Hi everyone
Actually I'm a php programer and don't no so much about java. After searching on google I found the java code you see below to open a popup when user moves the mouse pointer over a link. The code works fine with IE but not with Mozilla. Does anyone know why?

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2.  
  3. function initalt()
  4. {
  5. altback="gray" 
  6. altborder="white"
  7. altfont="arial"  // Alt-Message Font
  8. altfontcolor="white"// Alt-Message Font color
  9. altfontsize="2" // Alt-Message Font Size
  10. altoffx=5 // Alt-Message horizontal offset from mouse-position
  11. altoffy=15 // Alt-Message vertical offset from mouse-position
  12. altwidth=150 // Alt-Message width, will be expanded by your message
  13. altheight=0 // Alt-Message height, will be expanded by your message
  14. // end of Variables
  15.  
  16.                 document.onmousedown = sniff
  17.                 document.onmousemove = sniff
  18.                 document.onmouseup = sniff
  19.   if (document.layers) 
  20.   {  //NS
  21.   document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
  22.   document.layers['altmessage'] = new Layer(altwidth)
  23.   document.layers['altmessage'].left = 0
  24.   document.layers['altmessage'].top = 0
  25.   document.layers['altmessage'].height = altheight
  26.   document.layers['altmessage'].bgColor = altback
  27.   document.layers['altmessage'].visibility = "hidden"
  28.   document.layers['altmessage'].borderStyle = "solid"
  29.   document.layers['altmessage'].borderColor = altborder
  30.   document.layers['altmessage'].borderWidth = 1
  31.   }
  32.   else if (document.all)
  33.   { //IE
  34.   document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="altmessage" STYLE="z-index:200;position:absolute;width:'+altwidth+';height:'+altheight+';left:0;top:0;visibility:hidden;background:'+altback+';border-style:solid;border-width:1;border-color:'+altborder+'"></DIV>')
  35.   }
  36.   }
  37.  
  38.         function sniff(e) 
  39.         {
  40.         // GETS Mouseposition
  41.         if (document.layers)
  42.         {
  43.         var mousex=e.pageX; var mousey=e.pageY;document.layers['altmessage'].left = mousex+altoffx;document.layers['altmessage'].top = mousey+altoffy
  44.         }
  45.         else if (document.all)
  46.         {
  47.         var mousex=event.x; var mousey=event.y+document.body.scrollTop;altmessage.style.top=mousey+altoffy;altmessage.style.left=mousex+altoffx
  48.         }
  49.         }
  50.  
  51.        function doalt(message)
  52.        {
  53.        //The main routine
  54.        content='<font face="'+altfont+'" size="'+altfontsize+'" color="'+altfontcolor+'">'+message+'</FONT>'                
  55.        if (document.layers) 
  56.        {
  57.        with (document.layers['altmessage'].document)
  58.        {
  59.          open()
  60.        write(content)
  61.        close()
  62.        }
  63.        document.layers['altmessage'].visibility = "show"
  64.        }
  65.        else if (document.all) 
  66.        { 
  67.         document.all['altmessage'].innerHTML = content
  68.         document.all['altmessage'].style.visibility = "visible"
  69.        }
  70.        }
  71.        function realt()
  72.        {
  73.        if (document.layers)document.layers['altmessage'].visibility = "hidden";
  74.        else if (document.all) document.all['altmessage'].style.visibility = "hidden";
  75.        }
  76. </script>
  77.  
  78.  
I put this code between HEAD tags and then make my links like this

Expand|Select|Wrap|Line Numbers
  1. <body onload="initalt();">
  2. <a href="index.php" onmouseover="doalt('your message');" onmouseout="realt();">Some text</a>
  3. </body>
  4.  
Oct 26 '07 #1
Share this Question
Share on Google+
7 Replies


Ferris
100+
P: 101
hi

It seems very difficult to edit your code to make it work with Mozilla. Your code is totally designed for IE and NetScape 4.x. I suggest you reGoogle the code you want.

hope it helps.
Oct 28 '07 #2

100+
P: 258
Hi
Thanks for the reply
Actually I'v been searching for this script and this is the only one I found. Other ones were too much for my website (like big popup windows with backgrounds and even sound).. I just need a little popup to show a text with a border and thats it. It doesn't seem so complicated.

Does anyone have such a script?
Thanks
Oct 28 '07 #3

100+
P: 258
Hi everyone
The script you see below moves a text "Tooltip" to mouse pointer position it works fine in IE but it doesn't work in mozilla
Does anyone know why???

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script language="JavaScript1.2">
  5. <!--
  6. function showtooltip() {
  7. var IE = document.all?true:false
  8.  
  9. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  10.  
  11. var tempX = 0
  12. var tempY = 0
  13.  
  14.   if (IE) { // grab the x-y pos.s if browser is IE
  15.     tempX = event.clientX + document.body.scrollLeft
  16.     tempY = event.clientY + document.body.scrollTop
  17.   } else {  // grab the x-y pos.s if browser is NS
  18.     tempX = e.pageX
  19.     tempY = e.pageY
  20.   }  
  21.  
  22.   if (tempX < 0){tempX = 0}
  23.   if (tempY < 0){tempY = 0}  
  24.   document.getElementById('tooltip').style.left=tempX+10
  25.   document.getElementById('tooltip').style.top=tempY-10
  26.   document.getElementById('tooltip').style.display="block";
  27.   return true
  28. }
  29.  
  30. //-->
  31. </script>
  32.  
  33. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  34. <title>Untitled Document</title>
  35. </head>
  36.  
  37. <body>
  38.  
  39. <div id="tooltip" style="position:absolute; left:200px">Tooltip</div>
  40.  
  41. <a href="" onmousemove="showtooltip()" onMouseout="document.getElementById('tooltip').style.display='none';">Some text</a>
  42. </body>
  43. </html>
  44.  
Oct 29 '07 #4

100+
P: 210
Hi everyone
The script you see below moves a text "Tooltip" to mouse pointer position it works fine in IE but it doesn't work in mozilla
Does anyone know why???

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('tooltip').style.left=tempX+10
  2.   document.getElementById('tooltip').style.top=tempY-10
Try amending those lines thus:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('tooltip').style.left=tempX+10+'px';
  2. document.getElementById('tooltip').style.top=tempY-10+'px';
Oct 29 '07 #5

acoder
Expert Mod 15k+
P: 16,027
You could Google for "javascript tooltip".

If you're going to do it yourself, get the mouse position and display the div at that position on the screen.
Oct 29 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Threads on same topic merged.
Oct 29 '07 #7

100+
P: 210
Hi
Thanks for the reply
Actually I'v been searching for this script and this is the only one I found. Other ones were too much for my website (like big popup windows with backgrounds and even sound).. I just need a little popup to show a text with a border and thats it. It doesn't seem so complicated.

Does anyone have such a script?
Try UltimaTips. You can use it to replace the standard title text or specify your own separate text using your own stylesheet. It also displays hidden elements adjacent to the cursor.
Oct 29 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.