Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help

  Killersites.com Forum
  Category: Programming
  Forum: AJAX, Dom Scripting and JavaScript
  Thread: offsetHeight for Dropdown menu

Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 5
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 3275 times and has 4 replies Next Thread
Female gibran
Stranger




Joined: Apr 21, 2008
Post Count: 4
Status: Offline
Reply to this Post  Reply with Quote 
offsetHeight for Dropdown menu
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
[B][I]contentheight = crossobj.offsetHeight;[/I][/B]}


</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>
[May 7, 2008 10:12:01 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: offsetHeight for Dropdown menu
Hi,

Can ou post the JS inside of the Code or Quote tags from the post editor menu? The wysiwyg post editor is killing the code b/c it thinks there are [ b ] and [ i ] tags...
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[May 7, 2008 10:28:48 PM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Female gibran
Stranger




Joined: Apr 21, 2008
Post Count: 4
Status: Offline
Reply to this Post  Reply with Quote 
Re: offsetHeight for Dropdown menu
Hi,

Can ou post the JS inside of the Code or Quote tags from the post editor menu? The wysiwyg post editor is killing the code b/c it thinks there are [ b ] and [ i ] tags...




Here's the code once again:


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


Please help!
[May 8, 2008 7:21:46 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male shelfimage
Advanced Member
Member's Avatar

USA
Joined: Mar 24, 2005
Post Count: 3000
Status: Offline
Reply to this Post  Reply with Quote 
Re: offsetHeight for Dropdown menu
I'm not sure what you need to do...
The code contentheight = crossobj.offsetHeight returns a value 0. I need to get the height of the dropdown when it is displayed.


Are you trying to manipulate the appearance or height of the menu?
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks
[May 8, 2008 7:59:24 AM] Show Printable Version of Post    View Member Profile    Send Private Message    mainewebworks    mainewebworks [Link] Report threatening or abusive post: please login first  Go to top 
Female gibran
Stranger




Joined: Apr 21, 2008
Post Count: 4
Status: Offline
Reply to this Post  Reply with Quote 
Re: offsetHeight for Dropdown menu
I'm not sure what you need to do...
The code contentheight = crossobj.offsetHeight returns a value 0. I need to get the height of the dropdown when it is displayed.


Are you trying to manipulate the appearance or height of the menu?


I need to get the height of the menu. The menu is displayed onmouseover and I need to get this height of the menu.
[May 8, 2008 9:12:08 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

RSS feeds Current timezone is GMT
Sep 5, 2010 10:02:56 PM

Powered by mvnForum 1.2.1 GA (Build: 20 November 2008)
Copyright © 2002-2008 by MyVietnam.net