PDA

View Full Version : Animated Collapsible DIV



Itlan
04-24-2009, 06:22 PM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem: Animated collapse is not persistent when multiple pages have collapsible DIVs. I modified the "uninit" to maintain the previous open DIVs and add only new ones. The result is as follows:

uninit:function(){
var opendivids=new Array();//ITLAN
var groupswithpersist='';
var persistopenids=this.getCookie('acopendivids'); //ITLAN
if (persistopenids!=null){ //ITLAN
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(','); //ITLAN
}
else { persistopenids=new Array();} //ITLAN
opendivids=persistopenids; //ITLAN
jQuery.each(this.divholders, function(){
index=-1;
index=jQuery.inArray(this.id, persistopenids); //ITLAN
if (this.$divref.css('display')!='none'){
if (index !=-1){ //ITLAN
//Do nothing
}
else{ //ITLAN
opendivids.push(this.id); //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc' //ITLAN
}
}
else if (index !=-1) { //ITLAN
opendivids.splice(this.id,1); //ITLAN
}
else{
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+','; //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
});
if (opendivids!=null) opendivids=opendivids.join(','); //ITLAN
opendivids = (opendivids=='') ? 'nada' : opendivids.replace(/,$/, '');
groupswithpersist = (groupswithpersist=='') ? 'nada' : groupswithpersist.replace(/,$/, '');
this.setCookie('acopendivids', opendivids);
this.setCookie('acgroupswithpersist', groupswithpersist);
},

Lines that I added or modified are noted with //ITLAN.

I am not an expert JS programmer by any means, but the script didn't work as I expected when I used the persist on 3 different pages. It only remembered 1 page instead of all three.

Hope this helps some of you, or perhaps it will be added to the main script. Let me know if there is a better way, or maybe I forgot something.

Cheers,
Itlan

ddadmin
04-26-2009, 08:17 AM
You shouldn't have to make additional changes to the script for persistence to work across pages, as long the pages are are all within the same domain (note that http://www.yoursite.com and http://yoursite.com are treated as separate domains). Do you have a URL to the problem page?

Itlan
04-27-2009, 02:32 AM
You shouldn't have to make additional changes to the script for persistence to work across pages, as long the pages are are all within the same domain (note that http://www.yoursite.com and http://yoursite.com are treated as separate domains). Do you have a URL to the problem page?

The problem is that it only remembers 1 DIV name. So if I use it on several pages with different DIV names, it would only remember the last DIV that was saved in the open position.

Here is the login info: test/test

Here are 3 pages with the Animated Collasible DIVs (I've changed the script back to your original version):

http://projectlog.cvc-inc.net/projects.php?&active=1
http://projectlog.cvc-inc.net/news.php
http://projectlog.cvc-inc.net/employees.php

If you open the Filter DIV on one page, then go to another page and open the DIV, then go back to the first page, the DIV will be closed. On the contrary, if you open a DIV, then navigate to another page and leave the DIV closed, then go back to the first page the DIV will be left open.

The way I fixed this was by retrieving the list of open DIVs from the cookie, removing any closed ones, adding any open ones, then saving the list back to the cookie. It works perfectly.

ddadmin
04-27-2009, 06:41 AM
The way the script identifies if a DIV is the same one across pages is by its ID- whether it's the same, so yes, if on two pages the DIV carries a different ID, they have separate persistence settings. This is just the way the script is designed to work. Is there any reason why you can't give the same DIV across pages the same ID value?

Itlan
04-27-2009, 05:15 PM
The way the script identifies if a DIV is the same one across pages is by its ID- whether it's the same, so yes, if on two pages the DIV carries a different ID, they have separate persistence settings. This is just the way the script is designed to work. Is there any reason why you can't give the same DIV across pages the same ID value?

Thanks for looking.

Of course I could do that but then I wouldn't be able to use it on different DIVs even on the same page. For instance, if you look at the News page, you can click on the "More" button of the new item. As you can see it would work for unlimited DIVs on one page, and across different pages.

I was just offering my changes for you to consider for future updates.

Itlan
04-27-2009, 08:33 PM
I did a little more testing and found that I was saving the names of the open DIVs regardless of the 'persist' setting. So here is the revised 'uninit' method (revision highlighted):

uninit:function(){
var opendivids=new Array();//ITLAN
var groupswithpersist='';
var persistopenids=this.getCookie('acopendivids'); //ITLAN
if (persistopenids!=null){ //ITLAN
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(','); //ITLAN
}
else { persistopenids=new Array();} //ITLAN
opendivids=persistopenids; //ITLAN
jQuery.each(this.divholders, function(){
index=-1;
index=jQuery.inArray(this.id, persistopenids); //ITLAN
if ((this.$divref.css('display')!='none') && this.getAttr('persist')) {
if (index !=-1){ //ITLAN
//open DIV already in cookie
}
else{ //ITLAN
//add DIV to cookie
opendivids.push(this.id); //ITLAN
}
}
else if (index !=-1) { //ITLAN
//Remove DIV from cookie
opendivids.splice(this.id,1); //ITLAN
}
else{
//Do nothing
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+','; //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
});
if (opendivids!=null) opendivids=opendivids.join(','); //ITLAN
opendivids = (opendivids=='') ? 'nada' : opendivids.replace(/,$/, '');
groupswithpersist = (groupswithpersist=='') ? 'nada' : groupswithpersist.replace(/,$/, '');
this.setCookie('acopendivids', opendivids);
this.setCookie('acgroupswithpersist', groupswithpersist);
},


Also should be noted I did not enhance the 'Groups with persist' part.