Menu
Why I am getting Element offsetHeight "0"? even element original height is not showing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* Added for Menu */
.navbar
{
list-style: none;`enter code here`
padding: 0 10px;
margin: 0;
float: left;
width: 980px;
background: url(images/navbar.gif) repeat-x;
}
.navbar ul
{
list-style: none;
padding: 0px;
margin: 0;
float: left;
width: 260px;
}
.navbar ul li
{
float:left;
position:relative;
z-index:1000;
margin:0px;
padding:0px;
}
.navbar ul li ul
{
display:none;
border:none;
width: 260px;
padding:0 0px 0px 0px;
}
.navbar ul li a
{
font-size: 12px;
float:left;
display:block;
line-height:3.1em;
padding:0 16px 0 16px;
text-decoration:none;
color:#FFF;
}
.navbar ul li:hover
{
width:auto;
}
.navbar ul li:hover a
{
background:url(images/navbar_subnav.png) repeat-x scroll 0 0 transparent; text-decoration:none;
}
.navbar ul li:hover ul
{
display:block;
position:absolute;
z-index:998;
top:0px;
margin-top:25px;
left:0;
}
.navbar ul li:hover ul li ul
{
background-position: center bottombottom;
cursor: pointer;
}
.navbar ul li:hover ul li a
{
display:block;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-bottom:1px solid #205284;
border-left:1px solid #205284;
border-right:1px solid #205284;
border-top:1px solid #205284;
z-index: 10000;
width:200px;
}
.navbar ul li:hover ul li a:hover
{
background-color:#000;
text-decoration:underline;
color: #0099FF;
cursor: hand;
}
.navbar ul li a:hover ul
{
display:block;
position:absolute;
z-index: 998;
top:3.1em;
t\op:3.0em;
left:0;
marg\in-top:0.1em;
}
.navbar ul li a:hover ul li a
{
display:block;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
background-color:#000;
font-weight:normal;
color:#FFF;
}
.navbar ul li a:hover ul li a ul
{
visibility:hidden;
height:0px;
width:0px;
position:absolute;
z-index: 997;
}
.navbar ul li a:hover ul li a:hover
{
background-color:#000;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>
<a href="#">menu item 1</a>
<ul style="top:0px" >
<li style="width:288px;"><center><a href="#" onmouseover="movedown()" onmouseout="stopscroll()"><img src="images/menu-arrow-down.png" width="8" height="6" alt="Down"></a></center></li>
<script> //<![CDATA[
var speed=2
iens6=document.all||document.getElementById
ns4=document.layers
if (iens6){
document.write('<div id="container" style="position:relative;width:310px;height:165px;overflow:hidden;border:0px solid #205284">')
document.write('<div id="content" style="position:absolute;width:290px;left:0px;top:-1px;">')
}
//]]></script>
<ilayer name="nscontainer" width="190">
<layer name="nscontent" width="290" height="155" visibility="hidden">
<li style="top:-1px;"><a href="#">sub menu item 1 menu item 1</a></li>
<li style="top:-1px;"><a href="#">sub menu item 2 menu item 1</a></li> <li style="top:-1px;"><a href="#">sub menu item 3</a></li>
<li style="top:-1px;"><a href="#">sub menu item 1</a></li>
<li style="top:-1px;"><a href="#">sub menu item 1</a></li>
<li style="top:-1px;"><a href="#">sub menu item 2</a></li>
<li style="top:-1px;"><a href="#">sub menu item 3</a></li>
<li style="top:-1px;"><a href="#">sub menu item 1</a></li>
<li style="top:-1px;"><a href="#">sub menu </a></li>
<li style="top:-1px;"><a href="#">sub menu </a></li>
<li style="top:-1px;"><a href="#">sub menu </a></li>
<li style="top:-1px;"><a href="#">sub menu </a></li>
<li style="top:-1px;"><a href="#">sub menu </a></li>
<li style="top:-1px;"><a href="#">sub menu</a></li>
</layer>
</ilayer>
<script> //<![CDATA[
if (iens6)
{
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById('content') : document.all.content
//alert("document.getElementById('content').offsetHeight :"+ document.getElementById('content').offsetHeight);
alert("crossobj.prototype.outerHeight" + crossobj.prototype.outerHeight);
var contentheight=crossobj.offsetHeight
//var contentheight=document.getElementById('content').style.height;
//alert("ContentHeight :"+contentheight);
}
else if (ns4)
{
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
{
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
{
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
}
else if(ns4&&crossobj.top>=(contentheight*(-1)+100))
{
crossobj.top-=speed
}
/*else
{
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
}*/
}
movedownvar=setTimeout("movedown()",20)
}
function moveup()
{
if (window.movedownvar) clearTimeout(movedownvar)
{
if (iens6&&parseInt(crossobj.style.top)<=0)
{
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
}
else if (ns4&&crossobj.top<=0)
{
crossobj.top+=speed
}
moveupvar=setTimeout("moveup()",20)
}
}
function getcontent_height()
{
if (iens6)
{
//alert("getcontent_height : "+document.getElementById("content").style.height);
//contentheight=document.getElementById("content").style.height;
contentheight=crossobj.offsetHeight
}
else if (ns4)
{
document.nscontainer.document.nscontent.visibility="show"
}
}
window.onload=getcontent_height;
//]]></script>
<li><center><a href="#" onmouseover="moveup()" onmouseout="stopscroll()"><img src="images/menu-arrow-down.png" width="8" height="6" alt="Down"></a> </center></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
880
The offsetHeight is an HTML DOM property, which is used by JavaScript programming language. It returns the visible height of an element in pixels that includes the height of visible content, border, padding, and scrollbar if present. The offsetHeight is often used with offsetWidth property.
offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer. Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
Definition of jQuery offsetHeight. In jQuery, we can get the height of an element by using the offsetheight property in it. It is an in-built property of jQuery we can use it directly to get the viewable height of an element.
The offsetHeight property returns the viewable height of an element (in pixels), including padding, border and scrollbar, but not the margin.
Sometimes offsetHeight will return zero because the element you've created has not been rendered in the Dom yet. I wrote this function for such circumstances: Show activity on this post.
Another "trick" is to momentarily set the objects visibility to hidden, its display to block. And then get the offsetHeight. Then just reverse that by setting display to none and visibility to visible.
It sounds like neither statements are true, so it returns 0. That or obj.y = 0, and offsetTop = 0. Can you also post your HTML? And possibly jsfiddle to reproduce issue? The following function walks up the DOM tree, calculating the positions on its way.
Already on GitHub? Sign in to your account Based on scrollHeight am displaying footer or binding scroll event. So, in this case, scrollHeight is always 0.
Sometimes offsetHeight will return zero because the element you've created has not been rendered in the Dom yet. I wrote this function for such circumstances:
function getHeight(element) { element.style.visibility = "hidden"; document.body.appendChild(element); var height = element.offsetHeight + 0; document.body.removeChild(element); element.style.visibility = "visible"; return height; } You are trying to get offsetHeight of a hidden element. the css .navbar ul li ul has display:none that would make all of it's content invisible, including crossobj and you can't get height of elements that are not displayed, their height is simply put 0.
42
UPDATE
Changes applied to the DOM elements are not applied immediately, all the changes made to the DOM in a single execution cycle are collected and applied in one repaint.
So you need to wait for the repaint to complete before trying to read the updated dimensions of the element.
requestAnimationFrame is a method that is executed before every repaint.
requestAnimationFrame(() => {
element = document.getElementById("your_ID");
let height = element.offsetHeight;
console.log("debug height: " + height);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
