•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,716 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,164 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1898 | 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/
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Previous Thread: setting value is not sticking
- Next Thread: Javascript , PLEASE HELP
