Need Help on Animated Collapse

[k12onos]

1) Script Title:
Animated Collapsible DIV v2.01

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

3) Describe problem:

hi guys, i need help about this script, i couldn't find the right word to name the problem so let me explain below,

everytime we want to have an animated collapsing div, that means we have to add an additional addDiv() call, right?
so, 1 addDiv() is for one collapsing div.
So if i add an animatedcollapse.addDiv('jason') then it will only work for the div with id="jason" ,

the thing is, i have a blog and i would like to include this in my post, but i have many posts and it is a trouble that if i want to add another animated collapse div, i have to add animatedcollapse.addDiv() to the header.

so is there a way for me to call this animatedcollapse for any div without adding additional addDiv() ?

so i can use it freely around my posts when i need it.

Thank you very much in advance

[ddadmin]

There are a couple of ways to make it easier to initialize many DIVs on the page. However, they still require you to come up with a unique ID for each DIV. That's because even if animatedcollapse.addDiv() can be completely automated so you don't need to manually enter a unique ID, the function animatedcollapse.toggle() requires a ID to know which DIV you wish to toggle, for example:

animatedcollapse.toggle('jason')

Because of this, the extent in which you can make things easier is limited, at least not without some big changes to the script. One such way is to store all the IDs of the DIVs you wish to initialize in an array, and have them initialized using a loop. So ie:

<script type="text/javascript">

var animatedids=['jason', 'kelly', 'michael', 'cat', 'dog', 'rabbit']

for (var i=0; i<animatedids.length; i++){
 animatedcollapse.addDiv(animatedids[i], 'fade=0,speed=400,group=pets,persist=1,hide=1')
}
animatedcollapse.init()

</script>

You can take the above a step further, and have the script randomly generate an ID for each of the participating DIVs. In that sense it's probably truly automated. The question then is how you intend to let the script know which DIVs on your page should be initialized, without specifying the IDs of them inside the script.

[k12onos]

ddadmin, thanks for the reply, but can you explain a bit more about that? im just a beginner in javascript,,

if i use that code of yours, will it allow me to use the animatedcollapse in any DIVs? and what code should i use to call the function?


and about what you said, "and have the script randomly generate an ID for each of the participating DIVs", can you tell me about it more to make this happen?

thank you very much

[k12onos]

bump, anybody knows the answer?

[ddadmin]

Regarding the code that I had posted:

<script type="text/javascript">

var animatedids=['jason', 'kelly', 'michael', 'cat', 'dog', 'rabbit']

for (var i=0; i<animatedids.length; i++){
 animatedcollapse.addDiv(animatedids[i], 'fade=0,speed=400,group=pets,persist=1,hide=1')
}
animatedcollapse.init()

</script>

Basically, you'll need to modify the array to the IDs of the DIVs on your page that you wish to become an Animated DIV:

var animatedids=['mydiv', 'anotherdiv', 'div3']

Obviously, you'll need to assign a unique ID to each of the DIVs in your HTML first.

and about what you said, "and have the script randomly generate an ID for each of the participating DIVs", can you tell me about it more to make this happen?

If you're able to for example give all of the DIVs on your page that you wish to be animated a shared CSS class name, for example, the script can use that to know which DIVs should be animated, and generate a random, prerequisite ID for each of these DIVs. However, you still need to manually modify your HTML to give the DIVs in question a shared CSS class name first, so regardless of what you do, you need to manually identify the DIVs in question, either by giving them a unique ID, or a shared CSS class name.