Animated Collapse enhancement?

[rsjustin]

1) Script Title: Animated Collapse

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

3) Describe problem:

Hello...I'm new to the forum but have been following DD for years...it's great. I'm currently attempting to use the Animated Collapse script on a page I'm building, and it works great, but I'm wondering if there is a way to do 2 things in addition. I'm fairly confident that I could start frankensteining other functions together to get the desired result, but I'd prefer to keep things clean and concise.

1. I'm triggering the expand/collapse of 1 of 3 animating divs on a page using the slideit() function...however, I'm in need of a way to persist the button that's used to open a particular one. So if I have 3 buttons, 'RED' 'BLUE' and 'GREEN', and I click to open 'RED', I need to persist the (in this case image) to an over state to show which div is currently open. Further, it would be amazing if this functionality could be tied up with the url so I could drive traffic to these pages with variable urls...so the same result as above could be achieved by going to pagename.html#red...the div would open/be opened and the image would be persisted.

2. Second, the divs I'm toggling are fairly large...about 840 by 530. It could be that this script just isn't meant to handle such juggernauts, however, it seems to work fine in IE and Safari, but in Firefox, when one animation is opening as another is closing up (accordion-style) I get some artifacts below...this could be solved aesthetically with the ability to pass a delay time to a div...'don't start your animation until xxx, or don't start you animation until XXX animation has completed, etc.'

I of course know that it could be that this amazing function is about as amazing as it's going to get for free...which is fair. I'm just looking to stick with what I have experience with, and trying to avoid making the jump to a full-on framework like prototype or mootools if I can avoid it.

Thanks to all/anybody who give these issues some thought.

[ddadmin]

Creating an image button that reflects the state of the animated DIV it corresponds to (ie: "up.gif" by default, but change to "down.gif" when the DIV is sliding down) is quite simple. Basically, inside animatedcollapse.js, add the two lines in red to the below function:

animatedcollapse.prototype.slideit=function(){
	var slidetype=(isNaN(this.contentheight))? "n/a" : parseInt(this.divObj.style.height)==0? "down" : "up"
	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()
	return slidetype
}

This gets the "slideit()" function to return a string indicating whether the DIV is currently sliding up, down, or none of the above.

Then, using demo #2 within the code of Step 2 you pasted, your image button may look something like this:

<p><b>Example 2:</b></p>

<script type="text/javascript">

function collapsebutton(animatedvar, imgid, downimg, upimg){
var imgref=document.getElementById(imgid)
var slidestatus=animatedvar.slideit()
if (slidestatus=="n/a" || slidestatus=="up")
imgref.src=upimg
else
imgref.src=downimg
return false
}

</script>

<a href="#" onClick="return collapsebutton(collapse2, 'mybutton', 'down.png', 'up.png')"><img id="mybutton" src="up.png" border="0" /></a>
<div id="cat" style="width: 300px; background-color: #99E0FB;">

<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<div style="padding: 0 5px">
<h3>Content inside DIV!</h3>
<h3>Content inside DIV!</h3>
<h4>Note: No CSS height attribute defined. Persistence enabled.</h4>
</div>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>

Again, the code in red is new. The HTML for the button itself looks something like:

<a href="#" onClick="return collapsebutton(collapse2, 'mybutton', 'down.png', 'up.png')"><img id="mybutton" src="up.png" border="0" /></a>

Where the 1st param would be the variable of the animated DIV instance, the 2nd param the ID of the IMG element for the button, the 3rd and 4th params, the paths to the two images.

Regarding part 2 of your 1st question, it seems you're looking to get a particular DIV to expand based on information passed via the URL. This thread might help: http://www.dynamicdrive.com/forums/s...ad.php?t=24920

For question #2, currently each animated collapse DIV operates completely separate from the next on the page, so there's no way one instance can probe the status of another. Future update to this script should change that.

[rsjustin]

Wow. Let me first just say thanks on spec, based on time spent.

I'm packing things up for the night, but I'll do my best to test this implementation and report back with results as soon as possible. What a great and clearly well thought out response.

Thanks thanks thanks.

[rsjustin]

So...thanks again for the quick and thorough reply. After allowing the matter at hand to itch at my brain all through dinner, I decided to pop back into the office and try the fix...to middling results.

I think the fix was perfect...I just also think that my use of the function is/was pushing it, and I tried to fly to high too soon. What I was able to do, however, is implement your fix for linking directly to a page that will enact the slidedown() function and then use PHP to check for the variable in the url to persist the image. It's a good fix with the lone major compromise being a page refresh between 'tab' clicks.

One reason I think this might be the only sane way to do it is my previous implementation of the tabs...I had 3 of them, and each of the three 'buttons' had something like this in the link:

<a href="javascript:collapse1.slideit()" onMouseOver="overview.src='images/overview_tab_over.gif';" onMouseOut="overview.src='images/overview_tab_off.gif';" onClick="javascript:collapse2.slideup(); javascript:collapse3.slideup();"><img src="images/overview_tab_off.gif" width="297" height="34" border="0" name="overview"></a>

By the time I added the mouseover functionality AND the superfluous/watchdog triggers to make sure that the other 2 tab sections were indeed closed, the fix sort of broke down leaving me well in over my head.

That all said, the direct URL fix works exactly as expected. In a perfect world, I'd be able to trigger them not with an integer but with the real language name of the div (e.g. expand=overview vs. expand=1) but I that's a total nit.

Further, I had thought that using an anchor would make the transition a bit friendlier vs. using a hard ?variable, but you never know...that could just be one of those things you feel instead of know.

In any event...thanks.

I have to wonder...do you (ddadmin) and/or your team ever do work professionally? Like for project-for-hire? I'd be interested to have that conversation with you (privately) if the idea is at all within bounds.

Thanks again.

[ddadmin]

You're welcome From what I can gather, your problem is basically resolved one way or the other?

That all said, the direct URL fix works exactly as expected. In a perfect world, I'd be able to trigger them not with an integer but with the real language name of the div (e.g. expand=overview vs. expand=1) but I that's a total nit.

Further, I had thought that using an anchor would make the transition a bit friendlier vs. using a hard ?variable, but you never know...that could just be one of those things you feel instead of know.

All of the above scenerios are certainly possible, since they all deal with passing some sort of information using the URL, and for the Animated Collapse script to decipher it somehow. If you need help with a specific scenerio (different from the integer variable), feel free to ask.

I have to wonder...do you (ddadmin) and/or your team ever do work professionally? Like for project-for-hire? I'd be interested to have that conversation with you (privately) if the idea is at all within bounds.

I don't due to lack of time, but there's no rules prohibiting you from asking some of the mods or senior members around here. jscheuer1 for example probably knows a lot of the scripts here on DD as if he wrote them himself.