Hello Everyone and thanks for your help in advance. I am working on an application that utilizes DHTML. There are three textboxes on the webform and I wan to display a panel below each of the textboxes when someone is typing in them. However, I am having problems getting this panel to appear in the correct place. Here is some code sample:

xPos = getxCoordinate(searchBoxName);
yPos = getyCoordinate(searchBoxName);
var hgt = getElementHeight(searchBoxName);

function getxCoordinate(myElement)
{
    var xPos;
    var elem = document.getElementById(myElement);
    xPos = eval(elem).offsetLeft;
    return xPos;
}
function getyCoordinate(myElement)
{
    var yPos;
    var elem = document.getElementById(myElement);
    yPos = eval(elem).offsetTop;
    return yPos;
}
function getElementHeight(myElement)
{
    var height;
    var elem = document.getElementById(myElement);
    height = eval(elem).offsetHeight;
    return height;
}

yPos = yPos + hgt;
resultsPanel.style.top = yPos;
resultsPanel.style.left = xPos;
resultsPanel.style.visibility = "visible";

For some reason, when I check the xPos via an alert, it always returns 1 and the yPos does not function correctly. Any help on this topic would be greatly appreciated. Thanks.

Not quite sure what you need but you certainly don't need "eval". Here's a golden rule of JavaScript: NEVER USE EVAL.
Personally I would consider just having a div with its style.display set to "none" beneath each textbox and display it when needed, this avoids calculating the position dynamically.

--

Joe (Microsoft MVP - XML)

If you place the absolute div just before the the text tag in your html it will appear just where u want it to be. In the div itself you can add a <br> or another empty div with proper height to push it down a bit to appear exactly below the text box.
I myself haven't yet found a way to get the x and y absolute position of a none-absolute element on the page :(

Thanks for the response. What I am trying to accomplish is an "autocomplete" style box that appears below a textbox. The application is an AJAX application that works like Google Suggest. However, it varies in there are actually three textboxes on the page that I am trying to do this with. The results panel is the same data for all three boxes, so it owuld be advantageous to use the same result panel and simply place it based on the coordinates of the textbox being typed in. Since Javascript isn't my strongest language, some of the dynamic placement escapes me. I suspect that the offsetLeft and offsetTop may be based on the parent element and not on the document itself, so that may be the problem. However, I'm stuck since I don't know what the solution is. Any further assistance would be greatly appreciate. Thanks.

I could guessed what ur problem was and gave u the best solution I had.
If I had the same problem you've got, I would palce 3 div just before each text box and would try to show and hide them via obj.style.display='' or obj.style.display='none'
as I mentioned before to align it vertically just below the text box u'll have to add some other div or a <br> tag in the div you want to show behind the text box...

And again as I mentioned above the problem is that which it's position is not u can't get the absolute position of an item absolute(for example a td in a table).

If anyone knows how to do it please share the solution?