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/dynamici...edcollapse.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...

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:

Code:

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

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

Code:

<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/s...ad.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:

Code:

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

Code:

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:

Code:

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:

Code:

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

Code:

page.htm?expanddiv=jason,kelly

Thread: Animated Collapsible Div: Expanding a Div from an External Link

Thread Tools

Search Thread

Animated Collapsible Div: Expanding a DIV from an External Link

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions