PDA

View Full Version : Help with Collapse/Expand Divs



sconti
01-31-2011, 08:32 PM
I have the following functions:


<script>

var timerlen = 5;
var slideAniLen = 500;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
if(moving[objname])
return;

if(document.getElementById(objname).style.display != "none")
return; // cannot slide down something that is already visible

moving[objname] = true;
dir[objname] = "down";
startslide(objname);
}

function slideup(objname){
if(moving[objname])
return;

if(document.getElementById(objname).style.display == "none")
return; // cannot slide up something that is already hidden

moving[objname] = true;
dir[objname] = "up";
startslide(objname);
}

function startslide(objname){
obj[objname] = document.getElementById(objname);

endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();

if(dir[objname] == "down"){
obj[objname].style.height = "1px";
}

obj[objname].style.display = "block";

timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];

if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == "up")
d = endHeight[objname] - d;

obj[objname].style.height = d + "px";
}

return;
}

function endSlide(objname){
clearInterval(timerID[objname]);

if(dir[objname] == "up")
obj[objname].style.display = "none";

obj[objname].style.height = endHeight[objname] + "px";

delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);

return;
}

</script>

I have the following div tag:


<div id='mydiv' style='display:none'>some content</div>

....and then I have an ahref tag like so:


<a href="javascript:;" onclick="slidedown('mydiv');">Slide Down</a>
<a href="javascript:;" onclick="slideup('mydiv');">Slide Up</a>

What happens is that it just unhides real quick, and then will not work after that...it does shoot an error, which is 'Invalid argument'...and nothing else.

It is craping out on the following line:

obj[objname].style.height = d + "px";

not sure why...so if anyone has any insight on what I am doing wrong...please let me know.