Hi,
Below is my code. The problem is in display of IE.
Please help, urgent.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}
</style>
<script type="text/JavaScript">
function createDiv()
{
this.div = document.getElementById("base");
var ul = document.createElement('ul');
//Create an array of LI's for the words.
for(var i=0;i<3; i++)
{
var
word = "a "+i;
var li = document.createElement('li');
var a = document.createElement('a');
a.href="#";
a.innerHTML = word;
li.appendChild(a);
ul.appendChild(li);
}
this.div.replaceChild(ul,this.div.childNodes[0]);
this.el = document.getElementById("abc1");
var x = 0;
var y = 0;
x =findPosX(this.el);
y = findPosY(this.el);
this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
this.div.style.display = 'block';
}
function findPosX(obj)
{
var leftOffset = 0;
if (obj.offsetParent)
{
while (obj.offsetParent )
{
leftOffset += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x) //for NN4
{
leftOffset = obj.x;
}
return leftOffset;
}
function findPosY(obj)
{
var topOffset = 0;
var cnt =0;
if (obj.offsetParent)
{
var explorer= navigator.appName ;
if(explorer!='Netscape')
{
while (obj.offsetParent && cnt < 3)
{
if(obj.tagName == 'DIV')
cnt = cnt + 1;
if(cnt == 2)
topOffset += this.el.offsetHeight;
else
topOffset += obj.offsetTop;
obj = obj.offsetParent;
}
}else{
while (obj.offsetParent && cnt < 1)
{
topOffset += obj.offsetTop;
obj = obj.offsetParent;
cnt ++;
}
topOffset += this.el.offsetHeight;
}
}
else if (obj.y) // for NN4
{
topOffset = obj.y;
}
return topOffset;
}
</script>
</HEAD>
<BODY>
<div>
<p>
<input type="text" id="abc1"><input type="button" onklick="createDiv();">
<DIV id = "base" name="base" style="position: absolute"><ul></ul></DIV>
</p>
<select name="abc">
<option>1sssssssssssssssssssss</option>
<option>2eeeeeeeeeeeeee</option>
<option>3</option>
</select>
</div>
</BODY>
</HTML>
Regards
Aparna