changing the heigth of an object (help)

[ukemike]

hi im trying to make a drop down menu where each one of the layers, when they become visible slowly enlarge until their height it 300 or so.
i made a loop and "the_count_tim" is my counter. everything was working perfectly until line 7 and 9


my question is i cant add the two numbers together for some reason. i keeps addin them like they are a string.

check_out_my_code:


1) b = document.all('mike').style.height;
2) alert(b);
3) locator = b.indexOf('p');
4) a = b.substring(0, locator);
5)
6) alert('original height' + a);
7) c = parseInt(a) + the_count_tim;
8) alert('new height=' + c);
9) document.all('mike').style.height = 40;

lines 1 - 4 i just take the original height of my layer ('mike') and it returns like this: 30px. then i take the 'px' out.

after that is where im having a problem. on line 8 when that alert box comes up its suppose to have the old value
+ new value. instead they are coming up as strings being added.
after that sometimes it dont want to set the height for some reason in line 9. do you guys see any problem with that.

aight any help would be greatly appreciated.

im using IExplorer (if that helps).

thanx
mike

[Mr J]

You have not declared a value for

the_count_tim


<div id="mike" style="width:100;height:200;background-color:red"></div>
<script>
the_count_tim=100
b = document.all('mike').style.height;
alert(b);
locator = b.indexOf('p');
a = b.substring(0, locator);
alert('original height ' + a);
c = parseInt(a) + the_count_tim;
alert('new height=' + c);
document.all('mike').style.height = 40;
</script>


Note document.all is IE4

Your better going with

document.getElementById('mike').style.height;

[ukemike]

hey.

no i declared it in the begging. everything works find. the whole loop and everything. just those two lines dont work when i put them in

[Mr J]

You'll have to show all your code

[ukemike]

Ok here is the full text. Its my first attempt at making a drop down menu after learning javascript last week and learning dhtml this week.

Ok anyone who can help me with this i would greatly appreciate it.
Here is the code:



<style>
<!--

#tim {position: absolute;

left: 100px;
top: 40px;
width: 80px;
height: 100px;
background-color: black;
layer-background-color: black;
visibility: hidden;
border: 5px solid red;
}


#mike {position: absolute;

left: 200px;
top: 40px;
width: 80px;
height: 800px;
background-color: black;
layer-background-color: black;
visibility: hidden;
border: 5px solid red;
}

#joe {position: absolute;

left: 300px;
top: 40px;
width: 80px;
height: 800px;
background-color: black;
layer-background-color: black;
visibility: hidden;
border: 5px solid red;
}

#sam {position: absolute;

left: 400px;
top: 40px;
width: 80px;
height: 800px;
background-color: black;
layer-background-color: black;
visibility: hidden;
border: 5px solid red;
}

-->


</style>


<script language="JavaScript">
function my_script(key_id) {


if (document.all)
{
var this_key = document.all(key_id).style;

var clear1 = document.all('mike').style;
var clear2 = document.all('tim').style;
var clear3 = document.all('joe').style;
var clear4 = document.all('sam').style;



visible = 'visible';
hidden = 'hidden';
} else if (document.layers)
{
var this_key = document.layer[key_id];

var clear1 = document.layer['mike'];
var clear2 = document.layer['tim'];
var clear3 = document.layer['joe'];
var clear4 = document.layer['sam'];


visible = 'show';
hidden = 'hide';
}


//first clear everything

clear1.visibility = hidden;
clear2.visibility = hidden;
clear3.visibility = hidden;
clear4.visibility = hidden;






this_key.height = 200; //should be 800 (no 'px' here)
this_key.visibility = visible;

if (key_id=='mike')
{

doTimer_mike(this_key);

}

if (key_id=='tim')
{


doTimer_tim(this_key);

}

if (key_id=='joe')
{


doTimer_joe(this_key);

}

if (key_id=='sam')
{


doTimer_sam(this_key);
}




return true;

}

function timer_close(timeout_) {

x = clearTimeout(timeout_)

}


//-------------time out for tim
var the_count_tim = 0;
var the_timeout_tim;
function doTimer_tim(my_key)
{
// x = clearTimeout(the_timeout_mike);
// x = clearTimeout(the_timeout_joe);
// x = clearTimeout(the_timeout_sam);


if (the_count_tim > 500)
{
x = clearTimeout(the_timeout_tim);
}
else
{

the_count_tim = the_count_tim + 1;

b = document.all('mike').style.height;
alert(b);
locator = b.indexOf('p');
a = b.substring(0, locator);

alert('original height' + a);
c = parseInt(a) + the_count_tim;
alert('new height=' + c);
document.all('mike').style.height = 40;



// my_key.height = x + the_count_tim;

// alert(my_key.height);



the_timeout_tim = setTimeout("doTimer_tim();", 100);
}
}




//--------------time out for mike
var the_count_mike = 0;
var the_timeout_mike;
function doTimer_mike(my_key)
{
// x = clearTimeout(the_timeout_tim);
// x = clearTimeout(the_timeout_joe);
// x = clearTimeout(the_timeout_sam);

if (the_count_mike > 10)
{
x = clearTimeout(the_timeout_mike);
}
else
{
alert('mike=' + the_count_mike);
the_count_mike += 2;
the_timeout_mike = setTimeout("doTimer_mike();", 2000);
}
}


//---------------time out for joe
var the_count_joe = 0;
var the_timeout_joe;
function doTimer_joe(my_key)
{

// x = clearTimeout(the_timeout_mike);
// x = clearTimeout(the_timeout_sam);
// x = cleatTimeout(the_timeout_tim);

if (the_count_joe > 10)
{
x = clearTimeout(the_timeout_joe);
}
else
{
alert('joe=' + the_count_joe);
the_count_joe += 2;
the_timeout_joe = setTimeout("doTimer_joe();", 2000);
}
}


//---------------time out for sam
var the_count_sam = 0;
var the_timeout_sam;
function doTimer_sam(my_key)
{

// x = clearTimeout(the_timeout_joe);
// x = clearTimeout(the_timeout_tim);
// x = clearTimeout(the_timeout_mike);
if (the_count_sam > 10)
{
x = clearTimeout(the_timeout_sam);
}
else
{
alert('sam=' + the_count_sam);
the_count_sam += 2;
the_timeout_sam = setTimeout("doTimer_sam();", 2000);
}
}




function animate(key_id) {

if (document.all)
{
var this_key = document.all(key_id).style;
visible = 'visible';
hidden = 'hidden';
} else if (document.layers)
{
var this_key = document.layer[key_id];
visible = 'show';
hidden = 'hide';
}




}

</script>
</HEAd>

<BODY BGCOLOR="black" text="red" link="sienna" vlink="gray" alink="white">



<!--<IMG src="top-logo.jpg" alt="WELCOME TO HELL MOTHER****ERS" align="center" valign="top">-->


<a href="#" onMouseOver="my_script('tim');" onMouseOut="timer_close(the_timeout_tim);">See Tim</a>
<a href="#" onMouseOver="my_script('mike');" onMouseOut="timer_close(the_timeout_mike);">See Mike</a>
<a href="#" onMouseOver="my_script('joe');" onMouseOut="timer_close(the_timeout_joe);">See Joe</a>
<a href="#" onMouseOver="my_script('sam');" onMouseOut="timer_close(the_timeout_sam);"">See Sam</a>



<div id="tim" onMouseOver="animate('tim');">
Hello this is Tim<br>
<a href="www.firstpage1.html">Link 1</a><br>
<a href="www.firstpage2.html">Link 2</a><br>
<a href="www.firstpage3.html">Link 3</a><br>

</div>

<div id="mike" onMouseOver="animate('mike');">
Hello this is Mike<br>
<a href="www.secondpage1.html">Link 1</a><br>
<a href="www.secondpage2.html">Link 2</a><br>
<a href="www.secondpage3.html">Link 3</a><br>


</div>

<div id="joe" onMouseOver="animate('joe');">
Hello this is Joe<br>
<a href="www.thirdpage1.html">Link 1</a><br>
<a href="www.thirdpage2.html">Link 2</a><br>
<a href="www.thirdpage3.html">Link 3</a><br>

</div>

<div id="sam" onMouseOver="animate('sam');">
Hello this is Sam<br>

<a href="www.fourthpage1.html">Link 1</a><br>
<a href="www.fourthpage2.html">Link 2</a><br>
<a href="www.fourthpage3.html">Link 3</a><br>

</div>


</BODY>
</HTML>

[ukemike]

By the way.. when you do:

document.getElementById('mike').style.height;


is the for IE or netscape.??

thanx
mike