offsetHeight of Dropdown menu

**gibran** · 05-08-2008, 03:05 AM

Hi,

I am trying to create a scrollable dropdown menu using <ul> and <li> tags. However I am unable to determine the offsetHeight for the <ul> and embedded <li> tags. The code contentheight = crossobj.offsetHeight returns a value 0. I need to get the height of the dropdown when it is displayed.

Please advice on how this can be down. Given below is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>

<STYLE type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}

#menu {
position:absolute;
top:90px;
left:190px;
width: 130px;
color: gray;
}

#menu #defval {
cursor: pointer;
width: 190px;
height: 20px;
text-align: left;
font-size: 11;
font-weight: bold;
background-image: url(select.gif) ;
background-repeat: no-repeat;
}

#menu #defval, dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu li {
text-align: center;
width: 130px;
background-color:#666666;
filter:alpha(opacity=40);
opacity:0.4;
}

#menu li a, #menu #defval a {
color: #212121;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

#menu li a:hover, #menu #defval a:hover {
background: #eee;
}
</STYLE>

<SCRIPT type="text/javascript">
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) 
{
if (document.getElementById('smenu'+i)){
  document.getElementById('smenu'+i).style.display='none';
}
	}
	if (d) 
	{
		d.style.display='block';
	}
}

function getVal(obj) {
	var selValue = obj.innerHTML;
	var defEle = document.getElementById('defaultElement');
	defEle.innerHTML=selValue;
	show('');
}

	var crossobj;
	var contentheight;
	var menucontents;

function setDefVal() {
	var lists=document.getElementsByTagName("ul");
	var defVal=lists[0].childNodes[0].childNodes[0].innerHTML;
	document.getElementById('defaultElement').innerHTML=defVal;

}


function getcontent_height(){
   crossobj=document.getElementById? document.getElementById("smenu1") : document.all.smenu1
  contentheight = crossobj.offsetHeight;}


</SCRIPT>
 </HEAD>

 <BODY onLoad="show('');setDefVal();">
 
  <div id="menu">
  <div id="defval" style="position:relative" onmouseover="javascript:show('smenu1');">
   <span id="defaultElement"></span>
     <div id="smenu1" onmouseover="javascript:show('smenu1');"  onmouseout="javascript:show('');">
 <ul>
<li><a href="#" onclick="getVal(this)">sub-menu 1.1</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.2</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.3</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.4</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.5</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.6</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.7</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.8</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.9</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.10</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.11</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.12</a></li>
<li><a href="#" onclick="getVal(this)">sub-menu 1.13</a></li>
</ul>
</div>
</div>
</div>
</BODY>
</HTML>

**jscheuer1** · 05-08-2008, 05:21 PM

I don't really see the problem. I did change this one function for compatibility with other browsers other than IE:

Code:

function setDefVal() {
	var lists=document.getElementsByTagName("ul");
	var defVal=lists[0].childNodes[0].childNodes[0].innerHTML;
	document.getElementById('defaultElement').innerHTML=defVal;

}

to:

Code:

function setDefVal() {
	var lists=document.getElementsByTagName("ul");
	var defVal=lists[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0].innerHTML;
	document.getElementById('defaultElement').innerHTML=defVal;

}

But that doesn't change anything really. I also added ;return false; to your onclick events, but that just prevents the page from reloading when they are clicked. If I then added (highlighted and red):

Code:

 <BODY onLoad="show('');setDefVal();">
 
  <div id="menu">
  <div id="defval" style="position:relative" onmouseover="javascript:show('smenu1');">
   <span id="defaultElement"></span>
     <div id="smenu1" onmouseover="javascript:show('smenu1');"  onmouseout="javascript:show('');">
 <ul>
<li><a href="#" onclick="getcontent_height();alert(contentheight);getVal(this);return false;">sub-menu 1.1</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.2</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.3</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.4</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.5</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.6</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.7</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.8</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.9</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.10</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.11</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.12</a></li>
<li><a href="#" onclick="getVal(this);return false;">sub-menu 1.13</a></li>
</ul>
</div>
</div>
</div>
</BODY>

I got the offsetHeight.

**gibran** · 05-09-2008, 12:24 PM

Thanks. Its working now ....

Thread: offsetHeight of Dropdown menu

Thread Tools

Search Thread

offsetHeight of Dropdown menu

Bookmarks

Bookmarks

Posting Permissions