PDA

View Full Version : 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:


<!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:


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

}

to:


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):


<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 ....:)