Help with Collapse/Expand Divs

[sconti11]

I have this code that should work, but is not. Below are the 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="#" onClick="slidedown('mydiv');"> Slide Down</a>
<a href="#" 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.

Any help would be greatly appreciated!

 

[sconti11]

I found out what the 'Invalid argument' error was referring to. 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.

 

[feherke]

Hi

It starts from the line :

  endHeight[teal][[/teal]objname[teal]][/teal] [teal]=[/teal] [COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]obj[teal][[/teal]objname[teal]].[/teal]style[teal].[/teal]height[teal]);[/teal]

Where endHeight[objname] is set to [tt]NaN[/tt], because JavaScript can only get the [tt]style[/tt] properies previously set by JavaScript.

To get the actual height instead of [tt]obj[teal][[/teal]objname[teal]].[/teal]style[teal].[/teal]height[/tt] you could use [tt]getComputedStyle[teal]([/teal]obj[teal][[/teal]objname[teal]],[/teal]null[teal]).[/teal]getPropertyValue[teal]([/teal][green]'height'[/green][teal])[/teal][/tt] but that will not help, as it will return [tt]auto[/tt].

Better give up and use a JavaScript function library.


Feherke.

http://free.rootshell.be/~feherke/