Need help with Positioning Auto complete div using AJAX and Javascript

[sravani jetty]

Hi,

I am having issues in positioning the div in IE. Code I have works fine in all other browsers except in IE. I have a auto complete text box and an ajax call onKeyup event. The response is set in a div and the javascript for positioning this div doesn't work fine in IE. Any suggestions are very much appreciated.

function getAllergys(elementId) {
        var req = initRequest();
            var url = "/selfservice/rhsallergys" +
                        "?methodName=allergyAutoComplete" +
                        "&elementId=" +elementId + 
                        "&nameId=" + escape(document.getElementById('nameId').value) +
                        "&sW=" + document.getElementById('nameId').offsetWidth;
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        showResponse(elementId,req.responseText);
                    } 
                }
            };
            req.open("GET", url, true);
            req.send(null);
    }

function showResponse(elemId,contentHtml)
  {
      var algyDiv = document.getElementById("autoCompleteDiv");
      var ele = document.getElementById('nameId');
      algyDiv.innerHTML = contentHtml;
      algyDiv.style.position = 'absolute';
     document.getElementById("autoCompleteDiv").style.top = findPosY(ele);
     document.getElementById("autoCompleteDiv").style.left = findPosX(ele);
      algyDiv.style.visibility = "Visible";            
  }    

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)
    {
      curtop += obj.offsetHeight;
      while (obj.offsetParent)
      {
        curtop += obj.offsetTop;
        obj = obj.offsetParent;
       }
     }
     else if (obj.y)
     {
       curtop += obj.y;
       curtop += obj.height;
     }
     return curtop;
  } 

I have this div in my page

<div id="autoCompleteDiv" style="border: 1px solid; background-color:#FFFFFF; position:relative; width:270px; overflow:auto; visibility:hidden;">
 </div>

Thanks

[Eric Pascarello]

It would be a lot more efficient if you did the looping for the X and Y position together instead of doing it separately.

What doesn't work in IE? Did you check the values as it loops?

Eric

[sravani jetty]

Hi Eric,

Thank you for your reply. I tried getting the X and Y positions together as well. Problem I am having is the div aligns properly in all other browsers except in IE. In IE the div positions to the left. To get exactly below the textbox i have to do something like below

document.getElementById("autoCompleteDiv").style.left = findPosX(ele) - 300;

But with the above code it doesn't aligns properly in other browsers.

Thanks