aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Display problem of drop down and div Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Display problem of drop down and div" Watch "Display problem of drop down and div" New topic
Author

Display problem of drop down and div

aparna chitragar
Greenhorn

Joined: Nov 01, 2005
Posts: 3
Hi,

I have a html page where I have
One text box
one hyperlink
3 dropdowns
displayed in this order.

On clicking of hyper link I am showing a autocomplete like list using divs and UL/LI tags.
This list is displayed properly in all other browsers except IE.

In IE my list is going behind the dropdowns. It means the drop downs apear on the list instead of behind it.
I have nested divs in my page like.
<div>
<text box>
<div of list></end div of list>
<drop down1>
<drop down1>
</div>
Please, can any body tell me what is causing this and how to correct it?
Thanks in advance.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60992
    
  65

"ap ch",

There aren't may rules that you need to worry about here on the Ranch, but one that we take very seriously regards the use of proper names. Please take a look at the JavaRanch Naming Policy and adjust your display name to match it.

In particular, your display name must be a first and a last name separated by a space character, and must not be obviously fictitious.

Thanks!
bear
Forum Bartender


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
aparna chitragar
Greenhorn

Joined: Nov 01, 2005
Posts: 3
It was not a fictitious name. I had typed initials.
I hope now you don't have problem with it.

Regards
Aparna
aparna chitragar
Greenhorn

Joined: Nov 01, 2005
Posts: 3
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
 
Consider Paul's rocket mass heater.
 
subject: Display problem of drop down and div