Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseover JS fails in mozilla

    I have this JS code for an onmouseover link infobox. It works in IE and Opera but not in Mozilla or Firebird. Any idea of how to alter it for better cross browser recognition? here is the code:
    Code:
    <script language="JavaScript" type="text/javascript">
     function showInfobox(info) {
          var posX = 0;
          var posY = 0;
            var loc = window.event;
            if(loc.pageX || loc.pageY) {
            posX = loc.pageX;
            posY = loc.pageY;
            }
            else if(loc.clientX || loc.clientY) {
            posX = loc.clientX + document.body.scrollLeft;
            posY = loc.clientY + document.body.scrollTop;
            }
          document.all('infobox').innerText = info;
          var boxX = posX+5;
          var boxY = posY-5;
          document.getElementById('infobox').style.left = boxX;  
          document.getElementById('infobox').style.top = boxY;  
          document.getElementById('infobox').style.display = "block";  
        }
    
        function hideInfobox() {
          document.all('infobox').innerText = '';
          document.getElementById('infobox').style.display = "none";  
        }
    
    </script>
    </head>
    <body>
    
    <span onmouseover="showInfobox('Some poems')" onmouseout="hideInfobox()">
       <a href="http://www.leonardcohenfiles.com/mirror.html" >Leonard Cohen</a>
      </span>
    </body>
    Thank you.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    document.all is not part of the standard. Use document.getElementById to reference an object.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    And use innerHTML or DOM instead of innerText.

  • #4
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I tried those changes as follows but still fails in Mozilla. Did I make the changes corectly?
    Code:
    <script language="JavaScript" type="text/javascript">
     function showInfobox(info) {
          var posX = 0;
          var posY = 0;
            var loc = window.event;
            if(loc.pageX || loc.pageY) {
            posX = loc.pageX;
            posY = loc.pageY;
            }
            else if(loc.clientX || loc.clientY) {
            posX = loc.clientX + document.body.scrollLeft;
            posY = loc.clientY + document.body.scrollTop;
            }
           document.getElementById ('infobox').innerHTML = info;
          var boxX = posX+10;
          var boxY = posY-10;
          document.getElementById('infobox').style.left = boxX;  
          document.getElementById('infobox').style.top = boxY;  
          document.getElementById('infobox').style.display = "block";  
        }
    
        function hideInfobox() {
           document.getElementById ('infobox').innerHTML = '';
          document.getElementById('infobox').style.display = "none";  
        }
    
    </script>
    Thank you

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The following is a revised code that at least does not give errors on Mozilla.

    Caio


    Code:
    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    function showInfobox(e, info) {
    	var posX = 0;
    	var posY = 0;
    	var loc = e || window.event;
    	if(loc.pageX || loc.pageY) {
    		posX = loc.pageX;
    		posY = loc.pageY;
    	} else {
    		if(loc.clientX || loc.clientY) {
    			posX = loc.clientX + document.body.scrollLeft;
    			posY = loc.clientY + document.body.scrollTop;
    		}
    	}
    	document.getElementById ('infobox').innerHTML = info;
    	var boxX = posX+10;
    	var boxY = posY-10;
    	document.getElementById('infobox').style.left = boxX;  
    	document.getElementById('infobox').style.top = boxY;  
    	document.getElementById('infobox').style.display = "block";  
    }
    
    function hideInfobox() {
    	document.getElementById ('infobox').innerHTML = '';
    	document.getElementById('infobox').style.display = "none";  
    }
    
    </script>
    </head>
    <body>
    
    <span id="infobox" onmouseover="showInfobox(event, 'Some poems')" onmouseout="hideInfobox()">
       <a href="http://www.leonardcohenfiles.com/mirror.html" >Leonard Cohen</a>
      </span>
    </body>

  • #6
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh..I see that those alterations dont work in IE or Opera either. So I'm still using my original JS code. I wonder how I could get it working in Mozilla, or is there some other similar code that would be better for cross browser?
    Thank you.

  • #7
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    This should work :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

    <html>
    <head>
    <title>Info</title>
    <script language="JavaScript" type="text/javascript">
    function showInfobox(myinfo,event) {
    var posX = 0;
    var posY = 0;

    if(event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
    }
    else if(event.clientX || event.clientY) {
    posX = event.clientX + document.body.scrollLeft;
    posY = event.clientY + document.body.scrollTop;
    }
    document.getElementsByTagName("span")[1].childNodes[0].nodeValue = myinfo;
    var boxX = posX+5;
    var boxY = posY-5;
    document.getElementById('infobox').style.left = boxX;
    document.getElementById('infobox').style.top = boxY;
    document.getElementById('infobox').style.display = "block";
    }

    function hideInfobox() {
    document.getElementsByTagName("span")[1].childNodes[0].nodeValue = "";
    document.getElementById('infobox').style.display = "none";
    }

    </script>
    </head>
    <body>

    <span onmouseover="showInfobox('Some poems', event)" onmouseout="hideInfobox('Some poems', event)">
    <a href="http://www.leonardcohenfiles.com/mirror.html">Leonard Cohen</a>
    </span>

    <span id="infobox">&nbsp;</span>

    </body>

  • #8
    New Coder
    Join Date
    Apr 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great, yes your code works in Mozilla, but I tried to modify it to include more links and can't get it to work right - the infobox always appears in the same place, not next to its corresponding link.
    This is my modified code:
    Code:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
      
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
    
    <title>Info</title>
    
    
    <style type="text/css">
    #infobox {
          position         : absolute;
          left             : 0px;
          top              : 0px;
          background-color : #C0FFCC;
          color            : #000000;
          padding          : 3px;
          border           : solid 1px green;
          font-size        : 10px;
          display          : none;
        }
    </style>
    <script language="JavaScript" type="text/javascript">
    function showInfobox(myinfo,event) {
    var posX = 10;
    var posY = 10;
    
    if(event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
    }
    else if(event.clientX || event.clientY) {
    posX = event.clientX + document.body.scrollLeft;
    posY = event.clientY + document.body.scrollTop;
    }
    document.getElementsByTagName("span")[1].childNodes[0].nodeValue = myinfo;
    var boxX = posX+5;
    var boxY = posY-5;
    document.getElementById('infobox').style.left = boxX; 
    document.getElementById('infobox').style.top = boxY; 
    document.getElementById('infobox').style.display = "block"; 
    }
    
    function hideInfobox() {
    document.getElementsByTagName("span")[1].childNodes[0].nodeValue = "";
    document.getElementById('infobox').style.display = "none"; 
    }
    
    </script>
    </head>
    <body>
    
    <span onmouseover="showInfobox('Some poems', event)" onmouseout="hideInfobox('Some poems', event)">
    <a href="http://www.leonardcohenfiles.com/mirror.html">Leonard Cohen</a>
    </span>
    <br/>
    
    <span onmouseover="showInfobox('Some background on Oscar Wilde', event)" onmouseout="hideInfobox('Some background on Oscar Wilde', event)">
       <a href="http://www.catholiceducation.org/articles/arts/al0010.html" > Oscar Wilde</a>
      </span>
    
    <br /><br />
    
    
    
    
    <span onmouseover="showInfobox('Writer of Celtic spirituality and author of Anam Cara', event)" onmouseout="hideInfobox('Writer of Celtic spirituality and author of Anam Cara', event)">
       <a href="http://www.carlmccolman.com/odonohue.htm" >  John O Donohue</a>
      </span>
    <br /><br />
    
    
    <span onmouseover="showInfobox('Words of encouragement', event)" onmouseout="hideInfobox('Words of encouragement', event)">
       <a href="http://www.gabrielleswords-foryourhappiness.com" >Gabrielle Kirby</a>
      </span>
    
    <span id="infobox">&nbsp;</span>
    
    </body>
    </html>
    Any idea how to fix it? My site is www.loversofbeauty.com Thanks a mill.
    Last edited by jolene; 01-23-2005 at 07:12 PM.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why not just use the title attribute to show the tooltip?

    <a href="http://www.leonardcohenfiles.com/mirror.html" title="Some poems">Leonard Cohen</a>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •