SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member canadaka's Avatar
    Join Date
    Nov 2004
    Location
    Vancouver, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onMouseOver tooltip not working in firefox

    I use a fairly simple bit of html/css/javascript for toolip/popup boxes on my site www.canadianhottie.ca but they do not work in firefox. I would like to fix this, they work in IE6 and 7.

    Here is a test page, where I have just the code for the tooltip
    http://www.canadianhottie.ca/test.html

    Here are the 3 parts

    html
    HTML Code:
    <a href="" target="_blank" onMouseOut="Hide(Popup1)" onMouseOver="Show(Popup1)" onMouseMove="Show(Popup1)"><img src="" border="0" /></a>
    
    <div id="Popup1" class="transparent">tooltip content</div>
    javascript
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(Popup)
    {
    	/* get the mouse left position */
    	x = event.clientX + document.body.scrollLeft;
    	/* get the mouse top position  */
    	y = event.clientY + document.body.scrollTop;
    	/* display the pop-up */
    	Popup.style.display="block";
    	/* set the pop-up's left */
    	Popup.style.left = x;
    	/* set the pop-up's top */
    	Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide(Popup)
    {
    	/* hide the pop-up */
    	Popup.style.display="none";
    }
    	//-->
    </script>
    CSS
    Code:
    <style>
    .transparent {
        background-color: #E9E9E9;
        border: 1px solid black;
        display:none;
        width:150px;
        position:absolute;
        color:#333333;
    }
    </style>
    how can I get this too work in firefox? why doens't it work?
    thanks in advance for any help.

  2. #2
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The id value should be passed as a literal string, as in: Show('Popup1')

    You then should acquire the object through (in this case, no quotes, since we are using the passed parameter, not a string literal): document.getElementById(Popup)

    Assign the returned object to a variable, as in: targ_div = document.getElementById(Popup);

    Then apply your CSS modifications, as in: targ_div.style.~etc.

  3. #3
    Non-Member canadaka's Avatar
    Join Date
    Nov 2004
    Location
    Vancouver, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply, I have to admit im a javascript n00b, I usualy just trial and error it until something works.

    document.getElementById(Popup); does this go inside one of the 2 functions or outside?

    Assign the returned object to a variable, as in: targ_div = document.getElementById(Popup);
    not sure what you mean here, does this go inside the functions? is "targ_div = document.getElementById(Popup);" the actual code i enter?

    basically i need a dumbed down response. and with the css, what you say makes it sound like each popup would need a css class?
    right now i have one class for all popups ".transparent"

    Show(Popup1) id="Popup1"
    Show(Popup2) id="Popup2"
    ext.... i've done over a hundred on the same page.

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The document.getElement~ code needs to be in each function. The sample code can be used verbatim, or you can choose a variable name other than targ_div. Actually, it would be slightly better to make the variable local to the scope of the containing function by declaring it as: var targ_div = document.getElementById(Popup);

    Using display:none basically negates any other style rules; it removes the element from the document, completely. That's all you need to do to get an element to disappear. Had you not used position:absolute, the document would reform to reflect the element's removal. With position:absolute the element is already removed from the document's flow and is displayed independently of it.

    If you are doing a large number of these transitions you probably should apply an event handler. Here's a quick example using visibility instead of display:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    div.trans{height:100px;width:400px;}
    </style>
    <script type="text/javascript">
    window.onload=function(){  //initiate after page has finished loading
      var divs=document.getElementsByTagName('div');  //get all the divs
      var divs_ln=divs.length;
      for(var i=0;i<divs_ln;i++){
    	if(divs[i].className.indexOf('trans')!=-1){
    	  divs[i].onmouseover=addTrans;
    	}
      }
    }
    function addTrans(){
      this.style.visibility="hidden";
    }
    </script>
    </head>
    <body>
    <div class="trans" style="background-color:#dee;"></div>
    <div class="trans" style="background-color:#ded;"></div>
    <div class="trans" style="background-color:#dde;"></div>
    <div class="trans" style="background-color:#eed;"></div>
    <div class="trans" style="background-color:#edd;"></div>
    </body>
    </html>

  5. #5
    Non-Member canadaka's Avatar
    Join Date
    Nov 2004
    Location
    Vancouver, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm ok.. this confused me even more, all this does is show 5 boxes that don't hover, and when the mouse is placed over them they disapear to never come back.

    also with the above I dont see how to attach a div to an element.
    in my code, the <a href> tag that containts the onmouseover events is the trigger, and the divs are what is displayed in the tooltip window.


    doing some more experimenting, removing the following javascript makes the tooltip appear and disapear in firefox, but it no longer follows the mouse like it used to.
    [QUOTE]
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop;
    [QUOTE]

  6. #6
    Non-Member canadaka's Avatar
    Join Date
    Nov 2004
    Location
    Vancouver, Canada
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what i got now, it works perfectly in IE and now at least shows the tooltip in Firefox, just doens't follow the mouse pointer.

    HTML Code:
    function Show(Popup)
    {
    	var Popup = document.getElementById(Popup);
    	
    	if (navigator.appName == "Microsoft Internet Explorer") isIE = true; else 	isIE = false;
    	
    	if (isIE) { 
    		x = event.clientX + document.body.scrollLeft;
    		y = event.clientY + document.body.scrollTop;
    	}
    
    	Popup.style.display="block";
    	Popup.style.left = x;
    	Popup.style.top = y;
    	
    }
    
    function Hide(Popup)
    {
    	var Popup = document.getElementById(Popup);
    	Popup.style.display="none";
    }

  7. #7
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you lose the:

    if (navigator.appName == "Microsoft Internet Explorer") isIE = true; else isIE = false;
    and the:

    if (isIE)
    it should work on most browsers, if they have JavaScript enabled. While they won't follow the mouse, CSS tooltips are more reliable.


Bookmarks

Posting Permissions

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