animated collapse divobj is undefined error

[giarcjc]

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...e.htm#newattrs

3) Describe problem:

I am still kind of a javascript newbie so this is probably a bonehead error on my part, but I'm hoping someone can explain what I'm doing wrong here.

I am using the animated collapse script on various pages, some with only one or two collapsing divs and some pages with up to 40 or more divs. The script is working fine in all browsers that I've tested it in (FF3, IE8, Opera9, Safari4) but I get 1 error message that "divobj is undefined" in FF and IE says "'id' is null or not an object".


This is my code:

for (var i=1; i<=50; i++){
	animatedcollapse.addDiv('v'+i, 'fade=1,')
}


animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	
 		document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://www.cjcraig.com/images/selected_open.gif" :"http://www.cjcraig.com/images/selected_closed.gif" ;
}
animatedcollapse.init()

You can see my example pages here:

a few divs:
http://www.cjcraig.com/collapsible_div_test1.html

a lot of divs:
http://www.cjcraig.com/collapsible_div_test2.html


I'm guessing the problem is with this part document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://www.cjcraig.com/images/selected_open.gif" :"http://www.cjcraig.com/images/selected_closed.gif" ;


Do I have to define every single div here? If so, what's the best way to do that to allow for the varying number of divs on each page? Thanks!

[ddadmin]

You only have 18 DIVs on your page, yet in your for loop it goes up to 50:

for (var i=1; i<=50; i++){
	animatedcollapse.addDiv('v'+i, 'fade=1,')
}

[giarcjc]

Ah. I didn't realize that would cause the error, although it makes sense now. The reason I defined 50 was to allow for the flexibility to keep the script in one place via an include file, and use as many divs as each page required. But since it looks like that won't work I guess I'll try a different way.

Thanks for your help.

[ddadmin]

You may be able to get away with specifying an arbitray number inside the for loop, provided you check for the existence of the element you wish to manipulate inside the ontoggle event. So something like:

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
		if (divobj)
 			document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://www.cjcraig.com/images/selected_open.gif" :"http://www.cjcraig.com/images/selected_closed.gif" ;
}

Note however, that by initializing a bunch of non existent DIVs, even if there are no problems, it's still less efficient than initializing only those that exist.

[giarcjc]

Ah, that helps, thanks. This is what I finally ended up doing. It seems to work in all browsers without giving errors, and still gives me the flexibility to use as many divs as I need on a page, without having to specify more than necessary.

var x = 0;
var elementArray = [];

  if (typeof document.all != "undefined")
  {
    elementArray = document.all;
  }
  else
  {
    elementArray = document.getElementsByTagName("a");
  }
  var matchedArray = [];
  var pattern = new RegExp("javascript:animatedcollapse.toggle");

  for (var i = 0; i < elementArray.length; i++)
  {
    if (pattern.test(elementArray[i].href))
    {
     x = elementArray.length;
    }
  }

for (var i=1; i<=x; i++){
	animatedcollapse.addDiv('v'+i, 'fade=1,')
}

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if (divobj)
 		document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://www.cjcraig.com/images/selected_open.gif" :"http://www.cjcraig.com/images/selected_closed.gif" ;
}
animatedcollapse.init()