Results 1 to 8 of 8

Thread: Animated Collapsible DIV (collapse previous?)

  1. #1
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Animated Collapsible DIV (collapse previous?)

    1) Script Title: Animated Collapsible DIV

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

    3) Describe problem:

    Hi! On the original Switch Content II 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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Use this version of animatedcollapse.js:

    Code:
    //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
    }
    Last edited by jscheuer1; 08-03-2007 at 05:07 PM. Reason: format added code to match script's existing format
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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")
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Cool! Great stuff!

    Many thanks for your help.

    Matt

  6. #6
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •