PDA

View Full Version : Animated Collapsible Div: Expanding a Div from an External Link



dan_gva
09-20-2007, 07:37 PM
1) Script Title: Animated Collapsible Div

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

3) Describe problem: Is it possible to expand a Div from a link located on another page ?

Ideally, the function called by the link would open the Divs page,
point to the chosen Div and, at load completion, expand it.

Packing it this way:
<a href="javascript:location.href='mypage.htm#anchor7';collapse7.slideit()">Link text</a>
doesn't work... :rolleyes:

Any help welcome!
Dan

ddadmin
09-21-2007, 09:07 AM
You'll need to pass some info via the URL or cookies to the target page containing the Animated Collapsible DIV script to then tell it to run the expand function when the page loads. Something like:


<a href="target.htm?expand=1">Click here</a>

Then on the target page containing the script, you may have something like this:


<script type="text/javascript">

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

var param=window.location.href.match(/expand=(\d+)/i)
if (RegExp.$1=="1") //if URL parameter contains "?expand=1"
animatedcollapse.dotask(window, function(){setTimeout("collapse7.slidedown()", 200)}, "load")

</script>

I just tested the above, and it works. The implimentation is based on something similar to what's discussed in this thread: http://www.dynamicdrive.com/forums/showthread.php?t=24475

dan_gva
09-21-2007, 11:54 AM
Thanks a lot for your answer!

I've tested your code (FF and IE6) and it works perfectly as intended, great! :)

I'd have a complementary request, though.

For instance:
instead of testing for each and every parameter passed along with the URL
(i.e.: ((if (RegExp.$1!="1") else if (RegExp.$1!="2"))) etc.),
would it be possible to have it all done by one single function ?

The function would evaluate the parameter value, then pass it to the collapse function:
something like " collapse+'[i]'+.slidedown "
If there's no parameter passed with the url (standard page call with no expansion), then do nothing:
if (RegExp.$1!=""), as written in the post you mentioned.

Additionally, where should the receiving script be placed in the page code for best performance ?
In the <head> or in the <body>, at the very beginning or at the very end of the latter ?
(I placed it at the very end of the page for testing).

Thanks!

ddadmin
09-22-2007, 07:32 AM
Sure, the code I gave above is just an example of how the idea would work. Below is a more generic version:


<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse7=new animatedcollapse("cat", 800, false)
var param=window.location.href.match(/expand=(\d+)/i)
var paramvalue=RegExp.$1
if (/\d+/i.test(paramvalue)) //if URL parameter contains "?expand=integer"
animatedcollapse.dotask(window, function(){setTimeout("window['collapse'+paramvalue].slidedown()", 200)}, "load")

</script>

This lets you have a URL like:


target.htm?expand=INTEGER

In which collapseINTEGER.slidedown() would be called on the target page.

Right where the code is now is fine, as it doesn't really matter, since the final code will be called after the page has loaded, regardless of where you put it on the page.

dan_gva
09-24-2007, 02:15 PM
I have only one word to say: this is brilliant! :)

Thanks a million times for providing such a great and dedicated support!

I've been using scripts from your site for a couple of years,
but never used the forum resource so far.

Customising this script gave me an opportunity to do so,
and frankly I'm wondering why I didn't do it before! ;-)

Dynamic Drive is definitely one of the best DHTML resources out there.

Please keep on with the good work.

Cheers,
Dan

CoolD78
02-25-2009, 05:53 PM
Will this code work with v2.01 or does this have to be updated to work with the new version?

ddadmin
02-26-2009, 12:48 AM
The concept is the same, though the code above as is won't work obviously, and needs to be modified. Are you asking how do to this with the new version of the script?

CoolD78
02-26-2009, 02:15 PM
Yes, I would love to know how to add that to the current v2.01 code. Would you be able to add that to script page? or show me how this is done?

Thank you for the response.

ddadmin
02-27-2009, 02:03 AM
I should probably just add in such a feature to the script officially. Please give me a couple of days or so to get around to that.

ddadmin
03-02-2009, 06:05 AM
Sorry for the delay. Looks like I'll be adding this feature officially to the script later on. But in the meantime, you can use the below modified .js file. Then, to expand a particular DIV via the URL string, do something like:


page.htm?expanddiv=divid1,divid2,etc

where divid is the ID(s) of the DIVs you wish to expand, each separated by a comma if multiple. For example, given the two collapsible DIVs on the page:


<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<p><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('kelly')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a>

<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

To expand both, the URL of the current page would look like:


page.htm?expanddiv=jason,kelly