PDA

View Full Version : Using animated collapsible DIV script in multiple locations throughout page



AshleyQuick
09-06-2007, 03:44 PM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: I plan on using this (example 2) multiple times on a calendar I'm creating. Does the following snippet need to be added after each instance?

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>

Also, does the number inside the href beside the word collapse, <a href="javascript:collapse2.slideit()">, need to be increased each time? I hope this makes sense?

ddadmin
09-06-2007, 09:33 PM
The parts in red need to be unique for each different DIV content you're applying the script to:


var collapse2=new animatedcollapse("cat", 800, true)

For any link/ function that manipulates a DIV, it should correspond to the unique variable for it, in this case, "collapse2":


<a href="javascript:collapse2.slideit()">

AshleyQuick
09-07-2007, 12:01 AM
Thanks.

Ancient
09-23-2007, 04:19 PM
Im just gonna tell this to those who dont understand the explanation above.
Create as many DIV's as you want but in each DIV find this line

<a style="text-decoration:none" href="javascript:collapse2.slideit()">
The piece of code marked with red corresponds to this DIV and it must be unique for each DIV you create, otherwise they wont work correctly. To make 'em work simply change the number in that piece of code to next in line. For example you have 3 DIV's on you're page then they should look like this:

<a style="text-decoration:none" href="javascript:collapse2.slideit()">
<a style="text-decoration:none" href="javascript:collapse3.slideit()">
<a style="text-decoration:none" href="javascript:collapse4.slideit()">
As u can see I just changed the numbers. But its not all, at the end of final DIV there will be a line:

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)
You must edit it so the other 2 DIV's will work. Its easy - just add this line

var collapse2=new animatedcollapse("cat", 800, true)
as many times as you have DIV's on you're page but changing the number in highlighted piece of coding to numbers that u gave to you're DIV's. In our case it will look like this:

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)
var collapse3=new animatedcollapse("cat", 800, true)
var collapse4=new animatedcollapse("cat", 800, true)

Now all you're DIV's will work correctly. :)

urbancool
05-15-2008, 11:42 AM
is there anyway to automatically close an open div when another is clicked upon?

urbancool
05-15-2008, 10:36 PM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: I would like to get the DIV's on this page http://www.ascensor.co.uk/development08/paper/ to close when a new DIV is clicked upon, so no more than one can be 'open' at a time...

is this possible?

cxcawood
05-20-2008, 04:58 AM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem: Need to know if it is possible to expand all instances of the slider at once? even when there are multiple sets on the same page.

ddadmin
05-20-2008, 06:24 AM
Urbancool and cxcawood, in the future, please start a new thread when asking your own question on a DD script.

In a nutshell, the Animated Collapsible script is up for a rewrite, and the new version most likely will do both of what you've mentioned. ETA is probably within the next 2 weeks.

urbancool
05-20-2008, 10:00 AM
i apologise for my part in not starting a new thread... however, in direct response, i did also create a new thread with the same question, which it seems, everybody has bypassed completely!

Gottaloveit
06-09-2008, 07:47 PM
It would be great if the next version of the animated collapsible div would allow the div to be specified as a var, so that a dynamically generated page (I.e. a list of search results) could have an animated div for each result.

ddadmin
06-09-2008, 10:12 PM
It would be great if the next version of the animated collapsible div would allow the div to be specified as a var, so that a dynamically generated page (I.e. a list of search results) could have an animated div for each result.

If your page is dynamically generated, technically all HTML output are already output as variables according to your server side script. If you mean specifying the animated DIVs' HTML as JavaScript variables, there's no benefit to that, only disadvantages, as you have to make sure everything is escaped properly to avoid throwing JavaScript errors.

Gottaloveit
06-10-2008, 12:13 AM
Interesting point!

So is there a way with the current animated collapsible div script to allow each of my generated rows to have their own unique animated div? There will be about 50 or 75 rows per page... since the rows are generated from a mysql array, I'm not sure how to create unique divs for each of the rows. Currently the script works beautifully but only on the first row. Clicking the "show" link on any of the rows on the page only opens and closes the div in the first row (it looks beautiful though!)

Thanks for any help,

Jamie

Gottaloveit
06-11-2008, 06:10 AM
Nevermind, I found a solution to dynamically generate a unique div for each row of generated content. The script that is normally placed in the head can instead be placed in a php include. that include can have a database query, and then print the javascript as an array, printing a new row of javascript for each database entry. The div name can just be the id for that row of the dynamic content. If anyone wants example code just send me an email.

mbarone
01-31-2014, 12:03 AM
Hi Gottaloveit,
I would like to have this example of your code. Please tell me how to find it. I'm brand new to the forum.