PDA

View Full Version : Animated Collapsible DIV (collapse previous?)



matt blank
08-03-2007, 02:48 PM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem:

Hi! On the original Switch Content II (http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm) script, you could enable a feature called "Collapse Previous" which only allowed one content open at any time.

Is it possible to have this feature on the Animated Collapsible DIV script?

Many thanks!
Matt

jscheuer1
08-03-2007, 03:46 PM
Use this version of animatedcollapse.js:


//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last official updated June 27th, 07'. Added ability for a DIV to be initially expanded.
//updated Aug 8th, 2007 - unofficial collapse previous option - jscheuer1 in http://www.dynamicdrive.com/forums

var collapseprevious=true; //set to true to collapse previously opened div, false to allow multiple div's open
var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

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.divObj.style.overflow="hidden"
this.timelength=animatetime
this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"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!="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
}
else 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 //just collapse content if CSS "height" attribute available
if (persistexpand)
animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}

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"
}
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"
}


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 (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 (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.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()
}
else //else if this is a session only cookie
document.cookie = name+"="+value
}

matt blank
08-03-2007, 04:08 PM
OMG!!! Thank you so much!

One last question. Is it possible to have the page start with the first one open? and then people will realise that the other titles are clickable?

Thanks!
Matt

jscheuer1
08-03-2007, 04:10 PM
The script already does that, from the demo page:


By default the script will dynamically collapse the DIV in question when the page loads. You can optionally specify that the script leave the DIV expanded instead, by making use of the 4th optional parameter of animatedcollapse() and setting it to "block":

var collapse1=new animatedcollapse("dog", 1000, false, "block")

matt blank
08-03-2007, 04:51 PM
Cool! Great stuff!

Many thanks for your help.

Matt

matt blank
08-03-2007, 05:13 PM
Actually there is one more question...is it possible to turn the cache of this, so that when people come back to the page it starts again with on the top one open?

Thanks!
Matt

jscheuer1
08-03-2007, 05:49 PM
Turn the cache? In any case, if you want it to always show you the same look on page load, just set all the collapsible variable's persistence to false (from the demo page):



<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 1000, false)
</script>

tslm
09-07-2007, 12:33 PM
Hi John,
what about the "true" option in the variable's persistence?
I set it but navigating to another page (in the same browser session) and then returning on the page with the div the div status reset to the base one.
I' working with my notebook with IE7 on Vista.
Thanks,
Tiziano.