Member Avatar for DivX

this is what i got:

function roll(id,h){
     //menu = document.getElementById(id);
     cont+=1;
     document.getElementById(id).style.height = cont;
     t=setTimeout("roll('"+id+"',"+h+")",100);
     if (cont > h){
     cont=1;
     stop();
     }
}

this should resize a layer's height like an animated dropdown menu ... but it simply won't assign the new height.tryied also:

function roll(id,h){
     menu = document.getElementById(id);
     cont+=1;
     menu.style.height = cont;
     t=setTimeout("roll('"+id+"',"+h+")",100);
     if (cont > h){
     cont=1;
     stop();
     }
}

stop does nothing but:

function stop(){
    if (running){
    running=false;
    clearTimeout(t);
    };
}

stops the timeout. What is the problem?

Edited by TrustyTony because: fixed formating
  • 2 Contributors
  • 5 Replies
  • 398 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by DivX

Recommended Answers

All 5 Replies

Member Avatar for Eddie Traversa

This works for me in IE and Moz...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Grow Layer Animation</title>
<script type="text/javascript">
function animateLayers(id,size) {
el = document.getElementById(id).style;
  var h_size1 = parseInt(el.height);
   if(h_size1 < size) {
    el.height = h_size1+2+"px";
    setTimeout("animateLayers('" + id + "','" + size + "')", 1);
  }
}
</script>
</head>
<body onload="animateLayers('Layer1','500')">
<div id="Layer1" style="position:absolute; width:33px; height:23px; z-index:1; left: 256px; top: 0px; background-color: #996600;"></div>
</body>
</html>

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/

Member Avatar for Eddie Traversa

You could also use offsetHeight instead of parseInt like so;

<!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>
<title>Grow Layer Animation</title>
<script type="text/javascript">
function animateHeight(id,size) {
el = document.getElementById(id);
  var h_size1 =el.offsetHeight;
   if(h_size1 < size) {
    el.style.height = h_size1+2+"px";
    setTimeout("animateHeight('" + id + "','" + size + "')", 1);
  }
}
</script>
</head>
<body onload="animateHeight('Layer1','500')">
<div id="Layer1" style="position:absolute; width:33px; height:23px; z-index:1; left: 256px; top: 80px; background-color: #996600;"></div>
</body>
</html>

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php

Member Avatar for DivX

still won't work.
i think the problem is that my div contains severeal ancors:
here's one of the layers that won't work:

#submenu1{
filter:alpha(opacity=80,style=0);
position:absolute;
top:20;
left:20;
border: 1px solid black;
width: 120px;
background-color: #003466;
visibility : hidden;
z-index:1;


}


#submenu1 a{
font: bold 10px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: #FFFFFF;
text-decoration: none;
}


html>body #submenu1 a{
width: auto;
}


#submenu1 a:hover{
background-color: #5AB227;
color: white;
}


inside html:
<div id="submenu1">
<a href="http://www.mywebsite.com" >Profilul Companiei</a>
<a href="http://www.mywebsite.com">Scurt istoric</a>
<a href="http://www.mywebsite.com/">Showroom</a>
<a href="http://www.mywebsite.com">Politica noastra</a>
<a href="http://www.mywebsite.com">Despre Adeserv</a>
</div>


and the function onmouseover looks like this:



function showmenu(obj,id){
var menu = document.getElementById(id);
if(menu.style.visibility == 'hidden'){
if(id=="submenu5"){
menu.style.top = document.body.topMargin + obj.offsetTop+90;
menu.style.left = document.body.leftMargin + obj.offsetLeft+460;
}else{
removeall();
menu.style.top = getAbsY(obj)+obj.offsetHeight;
menu.style.left = document.body.leftMargin + obj.offsetLeft;
//alert(menu.offsetHeight);
}
menu.style.visibility = 'visible';
start(id,menu.offsetTop);
}

this shows the popup menu layer near a <td> object ...
but the browser won't allow me to change the height ..not even in the showmenu function...

Edited by TrustyTony because: fixed formating
Member Avatar for DivX

the submenu5 is for a special submenu layer... it must appear as a submenu and that's why i had to put it in an if clause...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.