Variables in animation

How do you add a variable to a style

[MartinWeb]

I have been trying to create a function where when you roll over a link, it expands.

First I created the function called grow- (Note: The following are pasted in the appropriate places in the full document.)

function grow(name)
{
var(name).style.width='150px'
}

Then, here is my link lower down on the page.

<div id="Home" style="background-color:#FFCC00; width:100px;" align="right" onmouseover="grow('Home')" onmouseout="this.style.width='100px'"> Homepage

</div>

What am I doing wrong?

[MartinWeb]

Sorry, I forgot to add- I later want to turn this into an animation where it takes a second to expand. That is why I simply did not put the code directly in the div tag.

[daveVk]

Do not understand function of var(name)

why not

function grow(el)
{
el.style.width='150px'
}

Then, here is my link lower down on the page.

<div id="Home" style="background-color:#FFCC00; width:100px;" align="right" onmouseover="grow(this)" onmouseout="this.style.width='100px'"> Homepage

</div>

[Blan]

function grow(name)
{
var expand = document.getElementById(name);
expand.style.width='150px'
}

[edited by: Blan at 4:13 am (utc) on July 6, 2009]

[MartinWeb]

Thank you! How does it know that 'expand' in the expand.style.width is a variable though?

[MartinWeb]

I now tried to turn that into an animation, but I am having a problem with the setTimeout function. I think that the problem occurs because the variable is not passed back to the function.

interval = 0;

width=100;

function grow(name)
{

if(interval<11){

var expand = document.getElementById(name);
interval = interval + 1;
width = width + 5;

expand.style.width = width +"px";

growTime=setTimeout("grow(name)",100);
}else{

interval = 0;

width=100;
}
}

Any ideas? Thanks.

[Fotiman]

Try replacing your setTimeout line with this:

growTime = setTimeout(function () {
  grow(name);
}, 100);

It's best not to pass quoted strings to the setTimeout function. Instead, pass a function reference. In the example above, I'm passing an anonymous function which calls the grow function with the name argument.

[edited by: Fotiman at 6:44 pm (utc) on July 6, 2009]

[MartinWeb]

Thank you!