Sliding div error. Can't solve this.

[rickya100]

Hi, thanks for checking this out.

Ok so the problem is that I have the following code for trying to get a div to slide down from the top of my page.

The problem is that on clicking the button that activates the function I get an error.

The error is flagged at line number 23 as an Undefined Value.

the javascript is below

var timerlen = 5;
var slideAniLen = 5000;

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 toggleSlide(objname){
  if(document.getElementById(objname).style.display == "none"){
    // div is hidden, so let's slide down
	if (objname == 'login'){
		document['objname'].src = "images/member_login_btn_go_up";
	}
	alert(objname);
    slideshow(objname);

  }else{
    // div is not hidden, so slide up
	if (objname == 'login'){
		document['objname'].src = "images/member_login_btn_go_down";
	}
	slidehide(objname);
  }
}

function slideshow(objname){
	if (moving[objname]){
		return;
	}
		
	if (document.getElementById(objname).style.display != "none"){
		return;
	}
		
		moving[objname] = true;
		dir[objname] = "down";
		startslide(objname);		
}

function slidehide(objname){
	if ( moving[objname]){
		return;
	}
		
	if (document.getElementById(objname).style.display == "none"){
	return;
	}
	
	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;
	
}

The code is from here:

http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/

And here:

http://www.harrymaugans.com/2007/03/24/one-click-toggle-for-sliding-animated-div/

I can't see a solution in the comments on the page anywhere.

Thanks for any help you can give.

[rickya100]

OK so the error above is no longer happening but an error that keeps replicating s now happening and it eventually crashes the browser.

It's on line 77 and it says "Type Error, Undefined Value"

An example of the site is online at www.mctc.co.uk

[MidiMagic]

You can't call a function that is below the function you call it from. Move endSlide up above slidetick.

[rickya100]

You can't call a function that is below the function you call it from. Move endSlide up above slidetick.

Hi MidiMagic,

Thanks for the reply. I did as you said and now I get an error of "Undefined Error" in FireFox's control panel. It again keeps replicating without stopping until I close the page.

It flags the following line in slideTick as the problem:

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

Any thoughts on this?

[rickya100]

Just posting to say I sorted it out.

Apparently the script needs that style settings for the div tag to be inline and not held in an external CSS file.

If anyone knows why this would be I'd love to hear as it sorta makes maintaining the site a bit harder and cumbersome.

[MidiMagic]

This depends on what is in the object module at the time the script loads. Scripts can not see dynamic changes made to web pages, unless the script is keeping track of the changes it makes itself.

Whether a script can see the style depends on when the script starts.

[rickya100]

This depends on what is in the object module at the time the script loads. Scripts can not see dynamic changes made to web pages, unless the script is keeping track of the changes it makes itself.

Whether a script can see the style depends on when the script starts.

Sorry, I don't quite understand what you're saying.

Could you try and explain it again please. I'm not very experienced in JavaScript but I do a few other languages PHP etc so I'm comfortable with all the concepts. It's just the specific rules and syntax of JavaScript I stumble over sometimes.

Thank you.