Smooth height change

function $(id){
	return document.getElementById(id);
}
function ComputedStyle(id,value){
	return document.defaultView.getComputedStyle($(id), "").getPropertyValue(value);
}
function setheight(id,a){
	$(id).style.height=a+'px';
}
function slide(id,duration){
	height1 = ComputedStyle(id,'height').replace('px','');
	i=parseInt(height1);
	while(i > 0){
		setTimeout("setheight('"+id+"',"+i+")",i*duration);
		i=i-1;
	}
}

Code (markup):

i seems to get to 0 when I'm debugging but it doesn't change the actual height!
But then when it hits 0 it seems to change the height to 0 then smoothly make the box bigger to the original height!!
but I want it to start at 100px then smoothly close to 0px.

Anyone got any ideas on what I'm doing wrong?

 

erm here is what's happening...

you run a loop that pre-queues your setTimeouts for you based upon data available at the time of the loop, namely i being between 100 and 0.

However, by the time the setTimeout hits and starts executing, i is already 0 so it goes to -1, -2 etc.

you need to self reference from your function to ensure a measured and timely execution...

not tested this but for example:

<div id="foo" style="background: red; width: 200px; height: 100px"></div>
<script>
var reduceDelay = 1, reduceStep = 5, reduceHeight = function(id) {
    var el = document.getElementById(id), i = parseInt(el.style.height);
    if (i >= 0) {
        el.style.height = i - reduceStep + "px";
        setTimeout("reduceHeight('"+id+"');", reduceDelay * i);
    }
};


window.onload = function() {
    reduceHeight("foo");
};
</script>

PHP:

 

Brilliant, Thanks it worked 1st time!