Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1984 | Replies: 5
 |
•
•
•
•
| |
•
•
Join Date: Jul 2005
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Please i need some help with js 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?
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?
•
•
Join Date: Jul 2005
Location: Australia
Posts: 19
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
This works for me in IE and Moz...
Eddie Traversa
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/
<!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/
•
•
Join Date: Jul 2005
Location: Australia
Posts: 19
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
You could also use offsetHeight instead of parseInt like so;
Eddie Traversa
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/index.php
<!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
•
•
Join Date: Jul 2005
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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...
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...
•
•
Join Date: Jul 2005
Location: Australia
Posts: 19
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
Post a page somewhere so I can see the whole code.
I can see one problem in the script
if(id=="submenu5"){
It doesnt look like your defining the id attribute so try something like this..
if(menu.id=="submenu5"){
Eddie Traversa
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/
I can see one problem in the script
if(id=="submenu5"){
It doesnt look like your defining the id attribute so try something like this..
if(menu.id=="submenu5"){
Eddie Traversa
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Hybrid Mode