PDA

View Full Version : Replace Collapsible Div



carmelaem
10-07-2008, 08:03 PM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem: I am trying to create a sliding billboard and was able to use the Animated Collapsible DIV script. Please view http://www.areadevelopment.com/test/expandableadtest/indexAdTest1.html. When the user clicks open, image 2 should replace image 1 or hide image 1. Does anyone know how to do that? I am a web designer not a programmer so bear with me.

Thanking you in advance!

ddadmin
10-08-2008, 08:38 PM
You'd simply define the two collapsible images as part of the same group. Please read the "Feature Attributes string" section on the script page. You may end up with something like:


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

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')

animatedcollapse.init()

</script>

<body>


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

<div id="cat" style="width: 300px; background: #BDF381;">
<img src="http://www.areadevelopment.com/test/expandableadtest/300x270.gif" />
</div>



<p><b>Example 5 (part of group "pets"):</b></p>

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

<div id="dog" style="width: 300px; background: #BDF381;">
<img src="http://www.areadevelopment.com/test/expandableadtest/300x600.gif" />
</div>

carmelaem
10-09-2008, 03:53 PM
Thanks for your help. I find Dynamic Forums to be a great resource.

ktomasso
12-20-2008, 08:58 PM
I've used this method to create a collapsible ad on one of my sites, however the toggle link does not seem to work in ie6.

My code:

<script type="text/javascript">

animatedcollapse.addDiv('newyearad', 'fade=0,speed=400,group=pets')
animatedcollapse.init()

</script>
</head>

<body>
<div id="frame">
<div id="outer-container">
<div id="container">

<div id="top-ad">
<a href="javascript:animatedcollapse.toggle('newyearad')">hide/show ad</a>

<div id="newyearad" style="width: 800px; background: #BDF381;">
<img src="images/newyeartest.jpg" />
</div>
</div>
You can find the page here (http://www.101mint.com/one0one/index_newyears2.html).

Does anyone know how to fix this issue? Thanks in advance.