SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tooltip positioning issue...

    Hello guys,

    I recently put together a dynamic tooltip using ajax. It works great in IE and Firefox, but on Safari I am getting a strange positioning issue and I"m not sure why.

    Basically if I activate the tooltip above the fold it works exactly as it should. If I scroll the page down however and then activate a link that utilizes the tooltip script, the tooltip is displayed around 150px away from the mouse which causes all sorts of problems.

    As I mentioned it is designed to display the tooltip at the mouse point and it works great in every browser other than Safari. Here is the code:
    Code:
    // Code
    function ShowMediaDescription(media_id, e)
    {
          theObject = document.getElementById("tooltip");
          
          theObject.style.visibility = "visible";
          
          var posx = 0;
          var posy = 0;
          
          posx = e.clientX + document.body.scrollLeft;
          posy = e.clientY + document.body.scrollTop;
          
          theObject.style.left = posx + "px";
          theObject.style.top = posy + "px";
          
          serverPage = "/mypage.php?m=" + media_id;
          objID = "tooltip";
          
          var obj = document.getElementById(objID);
          obj.innerHTML = "<div align='center'><img src='/v2images/media-desc-loader.gif' /></div>";
          xmlhttp.open("GET", serverPage);
          xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                obj.innerHTML = xmlhttp.responseText;
                }
          }
          xmlhttp.send(null);
    }
    
    function HideMediaDescription()
    {
          tObject = document.getElementById("tooltip");
          
          tObject.style.visibility = "hidden";
          tObject.style.height = "0px";
          tObject.style.width = "0px";
    }
    
    // Usage
    <a href="somelink.php" target="_self" onmouseover="this.className='mediaover';ShowMediaDescription('342',event);" onmouseout="HideMediaDescription();">Link</a>
    
    // Div Container - (at bottom of page, right before ending body tag)
    <div id="tooltip" class="tooltip"></div>
    
    // Tooltip CSS
    .tooltip
    {
          position:absolute;
          left:0px;
          top:0px;
          visibility:hidden;
          width:0px;
    }
    I think the issue is obviously something with my positioning code but I really don't know what to do to fix it. Hopefully someone out there has had a similiar experiencing working with tooltips on a Mac and can help.

    thanks,

    Chris
    Last edited by chrisdpucci; Apr 20, 2007 at 10:47.

  2. #2
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try replace the posx and posy with this one:

    Code:
          posx = (typeof e.pageX != 'undefined') ? e.pageX : e.clientX + (document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
          posy = (typeof e.pageY != 'undefined') ? e.pageY : e.clientY + (document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

  3. #3
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by the DtTvB View Post
    Try replace the posx and posy with this one:

    Code:
          posx = (typeof e.pageX != 'undefined') ? e.pageX : e.clientX + (document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
          posy = (typeof e.pageY != 'undefined') ? e.pageY : e.clientY + (document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    I didn't test this so I'm not sure if it would work, but I did solve the issue by doing some browser checking and conditional statements. I wasn't aware that Safari has a bug in the implementation of clientX and clientY and you need to use pageX and pageY instead which is what I ended up doing. Updated code below for those who may need it in the future:

    Code:
    function ShowMediaDescription(media_id, e)
    {
    	// Detect browser type
       var uA = navigator.userAgent;
       var browserType = "unknown";
    
       if(uA.indexOf("Opera") > -1)
       {
            browserType = "Opera";
       }
       else if(uA.indexOf("Safari") > -1)
       {
    		browserType = "Safari";
       }
       else if(uA.indexOf("Konqueror") > -1)
       {
    		browserType = "Konqueror";
       }
       else if(uA.indexOf("Gecko") > -1) 
       {
    		browserType = "Mozilla";
       }
       else if(uA.indexOf("MSIE") > -1)
       {
    		browserType = "Internet Explorer";
       }
    
    	theObject = document.getElementById("tooltip");
    	
    	theObject.style.visibility = "visible";
    	
    	var posx = 0;
    	var posy = 0;
    	
    	if(browserType == "Safari")
    	{
    		posx = e.pageX;
    		posy = e.pageY;
    	}
    	else
    	{
    		posx = e.clientX + document.body.scrollLeft;
    		posy = e.clientY + document.body.scrollTop;
    	}
    	
    	theObject.style.left = posx + "px";
    	theObject.style.top = posy + "px";
    	
    	serverPage = "/mypage.php?m=" + media_id;
    	objID = "tooltip";
    	
    	var obj = document.getElementById(objID);
    	obj.innerHTML = "<div align='center' style='width:80px;height:25px;background-color:#ffffff;border:1px solid #333333;'><img src='/v2images/media-desc-loader.gif' style='margin-top:2px;' /></div>";
    	xmlhttp.open("GET", serverPage);
    	xmlhttp.onreadystatechange = function() {
    	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    		obj.innerHTML = xmlhttp.responseText;
    		}
    	}
    	xmlhttp.send(null);
    }
    
    function HideMediaDescription()
    {
    	tObject = document.getElementById("tooltip");
    	
    	tObject.style.visibility = "hidden";
    	tObject.style.height = "0px";
    	tObject.style.width = "0px";
    }

  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you use prototype, you can easily get absolute cumulative position of an element by using Position.cumulativeOffset function.

  5. #5
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great, even better if you can single out a function to obtain positioning value.


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
  •