PDA

View Full Version : Collapsing DIV - Not Loading Open Using BLOCK Parameter



imillar
12-21-2007, 06:31 PM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem: I can not get the page to load with the DIV expanded even when using the 'block' parameter. It seems to have no effect. Everything else is working perfectly. I just downloaded the script yesterday. Here is the code:


var collapse8=new animatedcollapse("searchContent", 600, true, "block")


Thank-you!

Ian

ddadmin
12-22-2007, 10:18 AM
At the top of your page, does it contain a valid doctype, for example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

If so and things still don't work, please post a link to the page on your site that contains the problematic script so we can check it out.

imillar
12-27-2007, 04:29 PM
Yes it does contain the DOCTYPE.

Unfortunately this is an internal app that can't be posted. Would anyone be able to send me a link to a site that has this in effect and working? I can't hopefully extrapolate from there.

Thank-you!

Ian

imillar
12-27-2007, 05:01 PM
OK, I just turned off the persistent function and it now works./ I noticed that in the js file it states that:

//Last updated Aug 1st, 07'. Fixed bug with "block" parameter not working when persist is enabled
//Updated June 27th, 07'. Added ability for a DIV to be initially expanded.

So do I have the most current js file?

Thank-you,
ian

ddadmin
12-28-2007, 12:34 AM
Yep, you do have the latest version of the .js file. Are you saying with persistence turned off, the content now expands and collapses properly? The persistence feature shouldn't affect anything other than the initial state of a content within a browser session.

imillar
12-28-2007, 04:26 PM
Yep, you do have the latest version of the .js file. Are you saying with persistence turned off, the content now expands and collapses properly? The persistence feature shouldn't affect anything other than the initial state of a content within a browser session.
Hi There,

With persistence ON, the only thing that is not working is the initial state "block/contract" variable.

With persistence OFF, the initial state works but persistence does not.

So the only real problem I am having is that when persistence is on the initial state varilables have no effect. All the opening and closing functionality works totally fine.

Here is the DOCTYPE:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Here is the code:



<div class="contentAccordianContainer1">
<div id="title1" class="contentAccordianHead">

<a href="javascript:collapse1.slideit()">
What is Direct Client Rewards?
</a>

</div>
<div id="contentAccordianText" class="contentAccordianText1">
Basically, Direct Client Rewards helps you add another layer of value to your marketing initiatives to attract more prospects,
and helps differentiate you from other agents. You also provide increased value for your customers, who receive Aeroplan Miles
based on the value of the home they buy and/or sell with you.<br/><br/><br/>
</div>
<script type="text/javascript">
var collapse1=new animatedcollapse("contentAccordianText", 600, false, "block", "title1")
</script>

</div>




Here is the script:



//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated Aug 1st, 07'. Fixed bug with "block" parameter not working when persist is enabled
//Updated June 27th, 07'. Added ability for a DIV to be initially expanded.

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, titleDiv){
this.divId=divId
this.titleDiv = titleDiv
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" && this.isExpanded!="") //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" && this.isExpanded!="") //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"

document.getElementById(this.titleDiv).style.backgroundImage = 'url(../images/accordian_closed.gif)';
}
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)
document.getElementById(this.titleDiv).style.backgroundImage = 'url(../images/accordian_open.gif)';
}
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
if (direction == "up"){
document.getElementById(this.titleDiv).style.backgroundImage = 'url(../images/accordian_closed.gif)';
}
}
}


animatedcollapse.prototype.slidedown=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)==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){
document.cookie = name+"="+value
}


Thanks so much for you help with this!

Ian

imillar
12-28-2007, 04:28 PM
Hi There,

With persistence ON, the only thing that is not working is the initial state "block/contract" variable.

With persistence OFF, the initial state works but persistence does not.

So the only real problem I am having is that when persistence is on the initial state varilables have no effect. All the opening and closing functionality works totally fine.

Here is the DOCTYPE:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Here is the code:



<div class="contentAccordianContainer1">
<div id="title1" class="contentAccordianHead">

<a href="javascript:collapse1.slideit()">
What is Direct Client Rewards?
</a>

</div>
<div id="contentAccordianText" class="contentAccordianText1">
Basically, Direct Client Rewards helps you add another layer of value to your marketing initiatives to attract more prospects,
and helps differentiate you from other agents. You also provide increased value for your customers, who receive Aeroplan Miles
based on the value of the home they buy and/or sell with you.<br/><br/><br/>
</div>
<script type="text/javascript">
var collapse1=new animatedcollapse("contentAccordianText", 600, false, "block", "title1")
</script>

</div>




Here is the script:



//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated Aug 1st, 07'. Fixed bug with "block" parameter not working when persist is enabled
//Updated June 27th, 07'. Added ability for a DIV to be initially expanded.

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, titleDiv){
this.divId=divId
this.titleDiv = titleDiv
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" && this.isExpanded!="") //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" && this.isExpanded!="") //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"

document.getElementById(this.titleDiv).style.backgroundImage = 'url(../images/accordian_closed.gif)';
}
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)
document.getElementById(this.titleDiv).style.backgroundImage = 'url(../images/accordian_open.gif)';
}
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
if (direction == "up"){
document.getElementById(this.titleDiv).style.backgroundImage = 'url(../images/accordian_closed.gif)';
}
}
}


animatedcollapse.prototype.slidedown=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)==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){
document.cookie = name+"="+value
}


Thanks so much for you help with this!

Ian
P.S. I aded a 5th variable to do some background image swapping for another DIV element. The problem was here before this though and should have no effect.

Thanks.

drubage
03-05-2008, 11:27 PM
I am having the same problem, if persistence is set to TRUE and the 4th parameter is "block" it seems to load with the div expanded but then when the page finished loading it collapses again. You can see the problem here:

http://www.tribalectic.com/storedev/pc/viewCategoriesQuick.asp?pageStyle=h&idcategory=139&piercingLocationID=&mt=&gauge=16%20ga&IDBrand=#

I would like to have the expand/collapse decision persist AND have it expanded on first load.

-Drew

drubage
05-08-2008, 07:42 PM
So nobody here cares that the code doesn't work? Why is nobody responding about this bug?

-Drew

ddadmin
05-09-2008, 09:39 AM
This script is due for an overhaul soon. I'll see if I can get to fixing all of its known issues in one scoop when that happens.