PDA

View Full Version : Collapsible DIV Question



qkz
07-30-2007, 10:21 PM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem: Just wondering if there is a way to modify this script so that the selected DIV loads open AND remembers the user-chosen position throughout every page? Thanks. I tried some modified code in another thread but could not get it working.

ddadmin
07-30-2007, 10:59 PM
By user-chosen position, I gather you mean the user chosen state of the DIV (whether expanded or collapsed)? If you've enabled the persistence feature, the user chosen state is already remembered, just not across pages. To make it across pages, find the line:


animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")

and remove the part in red.

Also find the following line, and remove the part in red:


this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value

Then find the following line, and add to it the part in green:


document.cookie = name+"="+value+";path=/"

That should make the persistence feature site wide. Just make sure to enable persistence, and also, to use the same ID (ie: id="mydiv") for the animated DIV that are the same across pages.

qkz
07-31-2007, 02:18 AM
Thank you, I will try this out as soon as possible. Great site by the way. :)

qkz
07-31-2007, 03:23 AM
I have just tried the script again. After changing the js code, the div does not seem to remember the user chosen state at all anymore. Any ideas?

Thanks for the help. :cool:

ddadmin
07-31-2007, 06:33 AM
Ah yes, forgot about one another line. Find the following line, and remove the part in red:


this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value

qkz
08-01-2007, 04:50 AM
That worked fantastic! But, I have one more question. I can't seem to get the div to load open by default by using "block".. Any suggestions?

Thanks again for the time.

ddadmin
08-01-2007, 05:45 AM
Did "block" work before the changes I posted above? Nothing above should affect the "block" feature in any way...

qkz
08-01-2007, 07:25 PM
No, I could never get "block" working unless the enable persistence was set to false. I can't seem to use true and "block" at the same time?

ddadmin
08-01-2007, 08:14 PM
No, I could never get "block" working unless the enable persistence was set to false. I can't seem to use true and "block" at the same time?

Ok, this looks like a bug of the script. Find the below line and add to it the part in red:


if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" || persistexpand && this.isExpanded=="")

Do the same for the virtually identical line further down:


else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" || persistexpand && this.isExpanded=="")

Let me know if that fixes the problem.

qkz
08-01-2007, 09:33 PM
Ok, this looks like a bug of the script. Find the below line and add to it the part in red:


if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" || persistexpand && this.isExpanded=="")

Do the same for the virtually identical line further down:


else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" || persistexpand && this.isExpanded=="")

Let me know if that fixes the problem.

This did not change anything, the div still loads closed by default.

ddadmin
08-02-2007, 09:48 AM
Ok, instead of the changes in red earlier:


|| persistexpand && this.isExpanded==""

Change both occurences of this to:


&& this.isExpanded!=""

instead. Then, test out the effect in IE to see if it works. In Firefox, at least the latest version (2.0.0.6), there seems to be a bug with JavaScript session cookies that will still cause the same problem discussed.

qkz
08-02-2007, 04:26 PM
Ok, instead of the changes in red earlier:


|| persistexpand && this.isExpanded==""

Change both occurences of this to:


&& this.isExpanded!=""

instead. Then, test out the effect in IE to see if it works. In Firefox, at least the latest version (2.0.0.6), there seems to be a bug with JavaScript session cookies that will still cause the same problem discussed.

Hey there ddadmin, I tried this out in IE with no luck. I also tested it with Opera and Safari just to check.

I hope that we can get this fixed, but if not I can just use the script like it is because besides this small issue it works great in every browser. :cool:

qkz
08-05-2007, 01:55 AM
Hey there ddadmin, I tried this out in IE with no luck. I also tested it with Opera and Safari just to check.

I hope that we can get this fixed, but if not I can just use the script like it is because besides this small issue it works great in every browser. :cool:

Bumped up just in case this post was missed. :cool:

jscheuer1
08-05-2007, 04:04 AM
Give this mod a shot:


//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last official update June 27th, 07'. Added ability for a DIV to be initially expanded.
//Unofficial update Aug 4th, 2007 - collapse previous, trigger behavior, cookie scope option, and cookie initial state coordination
//Aug 4th, 2007 update - jscheuer1 in http://www.dynamicdrive.com/forums

var collapseprevious=false; //set to true to collapse previously opened div(s), false to allow multiple div's open
//the below gets the current page path and name, to uniquely identify this page for persistence feature
//set to an empty string (var uniquepageid="") to enable persistence across an entire domain.
var uniquepageid="" //window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "")

function animatedcollapse(divId, animatetime, persistexpand, initstate){
if(!animatedcollapse.ar)
animatedcollapse.ar=[];
animatedcollapse.ar[animatedcollapse.ar.length]=this;
this.divId=divId;
this.divObj=document.getElementById(divId)
this.t_c=(this.trigger=document.getElementById(divId+'0')||null)&&(this.closer=document.getElementById(divId+'1')||null);
if(this.t_c&&!persistexpand) {
this.trigger.style.display=initstate&&initstate=='block'? 'none' : '';
this.closer.style.display=initstate&&initstate=='block'? '' : 'none';
}
this.divObj.style.overflow="hidden"
this.timelength=animatetime
this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId)||(this.initstate=='block'? 'yes' : null)||null; //"yes" or "no", based on cookie value
this.contentheight=parseInt(this.divObj.style.height)
var thisobj=this
if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded&&this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
if(this.t_c)
this.trigger.style.display='',this.closer.style.display='none';
}
}
else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded&&this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
if(this.t_c)
this.trigger.style.display='',this.closer.style.display='none';
}
if (persistexpand){
animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
if(this.t_c)
this.trigger.style.display=this.isExpanded=='yes'? 'none' : '',this.closer.style.display=this.isExpanded=='yes'? '' : 'none';
}
}

animatedcollapse.prototype._getheight=function(persistexpand){
this.contentheight=this.divObj.offsetHeight
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //collapse content
this.divObj.style.visibility="visible"
if(this.t_c)
this.trigger.style.display='',this.closer.style.display='none';
}
else {//else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
this.divObj.style.height=this.contentheight+"px"
if(this.t_c)
this.trigger.style.display='none',this.closer.style.display='';
}
}


animatedcollapse.prototype._slideengine=function(direction){
var elapsed=new Date().getTime()-this.startTime //get time animation has run
var thisobj=this
if (elapsed<this.timelength){ //if time run is less than specified length
var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
this.divObj.style.height=distancepercent * this.contentheight +"px"
this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
}
else{ //if animation finished
this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
this.runtimer=null
}
}


animatedcollapse.prototype.slidedown=function(){
if(this.t_c)
this.trigger.style.display='none',this.closer.style.display='';
if (collapseprevious)
for (var i = 0, a=animatedcollapse.ar; i < a.length; i++)
if(a[i]!=this)
a[i].slideup();
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
this.startTime=new Date().getTime() //Set animation start time
this._slideengine("down")
}
}
}

animatedcollapse.prototype.slideup=function(){
if(this.t_c)
this.trigger.style.display='',this.closer.style.display='none';
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
this.startTime=new Date().getTime()
this._slideengine("up")
}
}
}

animatedcollapse.prototype.slideit=function(){
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0)
this.slidedown()
else if (parseInt(this.divObj.style.height)==this.contentheight)
this.slideup()
}

// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------

animatedcollapse.curveincrement=function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}


animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

animatedcollapse.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

animatedcollapse.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

animatedcollapse.setCookie=function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+(uniquepageid? "" : "; path=/");
}
else //else if this is a session only cookie
document.cookie = name+"="+value+(uniquepageid? "" : "; path=/");
}

Added Info: After updating to the above script, make sure to exit all browser instances to clear the session cookie(s) before testing.

qkz
08-05-2007, 05:44 AM
Give this mod a shot:

Thanks so much jscheuer1, that worked perfect.