Simple change to a style

[DeathRay2K]

I'm trying to make a function that smoothly increases/decreases an elements letter-spacing.So far, I've tried this:

			function expand(id)			{				space = document.getElementById(id).style.letterSpacing				space = space + 0.1				document.getElementById(id).style.letterSpacing = space				alert(space)				if(space < 1)				{					expand(el)				}			}			function shrink(id)			{				space = document.getElementById(id).style.letterSpacing				space = space - 0.1				document.getElementById(id).style.letterSpacing = space				alert(space)				if(space > 0)				{					shrink(id)				}			}

And that output and endless stream of alerts with no content and the following error:

Warning: Error in parsing value for property 'letter-spacing'. Declaration dropped.

Then, someone told me I had to add 'px' to the end, and I tried this:

			function expand(id)			{				space = document.getElementById(id).style.letterSpacing				space = space + 0.1				document.getElementById(id).style.letterSpacing = space & 'px'				alert(document.getElementById(id).style.letterSpacing)				if(space < 1)				{					expand(id)				}			}			function shrink(id)			{				space = document.getElementById(id).style.letterSpacing				space = space - 0.1				document.getElementById(id).style.letterSpacing = space & 'px'				alert(space)				if(space > 0)				{					expand(id)				}			}

That alerted 0pt on mouseOver, and NaN on mouseOutFinally, here's the HTML:

<span id="previousyear"><a id="pyear" href="index.php?month=<?= $month - 12; ?>" onMouseOver="expand('pyear')" onMouseOut="shrink('pyear')">Previous Year</a></span>

I realise that I haven't added a delay yet, I just want to make it work first.

[skym]

'&' ? That's bitwise AND in javascript.Why not space+'px' ?

[DeathRay2K]

I'm terrible with Javascript, but fortunately I got a friend to help, and this was the result:

function resize(el){var step = 0.1;var dir = items[el];var elem = document.getElementById(el);var t = parseFloat(elem.style.letterSpacing);if(isNaN(t)){  t = 0;}t += (dir * step);if(items[el] == dir){  if(t <= 1 && t >= 0)  {   elem.style.letterSpacing = t + 'px';   setTimeout("resize('" + el + "')", 0);  }}}function expand(){items[this.id] = 1;resize(this.id);}function contract(){items[this.id] = -1;resize(this.id);}window.onload = function(){for (var i in items){  var item = document.getElementById(i);  item.onmouseover = expand;  item.onmouseout = contract;}};var items = {'w' : 0, 'q' : 0}; // ids of stylable items

And it works perfectly.