Friday, July 25, 2008

Finding Postions of HTML Element in a Scrollable Div

Hi Friends,

Have you ever find it difficult to find the x, y coordinates value for a HTML element in side a scrollable div. Just few days back, i got this problem. where i wanted to show tool tip on a link, but since the HTML element was in a scrollable div, the positioning to tooltip was not correct. Here is the code earlier i used to find the X and Y positions:

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

This function works well when your HTML element is not within a scrollable div. But what if it is present inside a scrollable div? So here is the solutions. I found that we are using prototype.js. Which has a Element called Position. This helps to find out the actual pixel value for X and Y coordinate. Here is code how to calculate is:

var iebody = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;

var dsocleft = document.all? iebody.scrollLeft : pageXOffset;
var dsoctop = document.all? iebody.scrollTop : pageYOffset;

var posReal = Position.realOffset(obj);
//Position is a readymade object in prototype.js
var pos = Position.cumulativeOffset(obj);

var top = pos[1] - posReal[1] + dsoctop;
//value of Y
var left = pos[0] + posReal[1] - dsocleft;
//value of X

In this way, you can find the accurate pixel value of X and Y coordinates. I hope this will help you all.


Technorati Tags: , , ,