Problem with Animated Collapse Script

**QuickDraw** · 10-15-2007, 08:07 PM

1) Script Title: Animated Collapsible DIV

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

3) Describe problem: I've included this script on a page that also contains the Tab Content Script (v 2.0) (http://www.dynamicdrive.com/dynamici...abcontent.htm).

When the page loads I use the Tab Content Script to display div content which contains the Animated Collapsible DIV script.

The problem is when I click the link to display the collapsible DIV nothing happens. However, if I refresh the page it works perfectly and continues working.
Any ideas how I can get it working first go? Any help appreciated, thanx.

**ddadmin** · 10-16-2007, 10:20 AM

Almost identical question here: http://www.dynamicdrive.com/forums/s...ad.php?t=25676 Please see my response.

**frozentoes** · 08-31-2009, 02:18 AM

1) script title: Animated Collapsible Div version 2.4

2) Script URL: I would give it but this is a website that is being created for the first time and is not hosted yet.

3) I am having a similar problem except exactly the opposite. The first time the page loads the animated collapsible div works as it should. I am taking advantage of the "data-imageclosed" & "data-imageopen" attributes. However, when I refresh the page the images no longer toggle the div and the images no longer change.

This is the script for the page:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (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 src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

animatedcollapse.addDiv('com', 'fade=0,speed=400,hide=0,persist=1')


animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

</head>

<body>
<div style="text-align:center;"><a href="#" rel="toggle[com]" data-openimage="images/video_close.jpg" data-closedimage="images/video_open.jpg"><img src="video_open.jpg" style="border:0px;"/></a></div>
</div>
</center>
<div id="com" style="width: 600px; height:245px; background: #f2f2f2; overflow:auto; text-align:center;">
  <object classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="scale" value="noscale">
    <param name="salign" value="lt">
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_2&amp;streamName=../CDVideoCut-ups/AdventureKartTour&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0">
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="../Scripts/expressInstall.swf">
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="320" height="240">
      <!--<![endif]-->
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <param name="scale" value="noscale">
      <param name="salign" value="lt">
      <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_2&amp;streamName=../CDVideoCut-ups/AdventureKartTour&amp;autoPlay=true&amp;autoRewind=false" />
      <param name="swfversion" value="8,0,0,0">
      <param name="expressinstall" value="../Scripts/expressInstall.swf">
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>
</body>
</html>

**ddadmin** · 09-01-2009, 02:16 AM

Hmm I don't see how enabling the "data-image" attributes would cause the toggler to not work upon a page reload. To test it out though, what happens when you remove those two attributes?

**frozentoes** · 09-01-2009, 07:19 PM

You were right it wasn't the "data-image" attributes that were causing the problem. Having the 'href="#"' was the cause of the problem. It was trying to refresh the page webbrowser and go the the correct url (the same page) with "#" at the end of the URL string. So what happened is there was no page with that address and the code broke because I don't think there is a safety for improper urls in the script.

Code:

<body>
[COLOR="Red"]<div style="text-align:center;"><a href="#" rel="toggle[com]" data-openimage="images/video_close.jpg" data-closedimage="images/video_open.jpg"><img src="video_open.jpg" style="border:0px;"/></a></div>
</div>
</center>

Now that I have fixed that problem I would prefer to not have the pages refresh at all when the button is clicked. On Opera, Safari, Netscape, and Google Chrome when the button is clicked the script tried to run properly but the page is refreshed and the animated div is at it's starting position. Is there something I need to put into the 'href=" attribute to keep the page from refreshing. I think the refreshing of the page is what is causing me all this heart ache. Any more ideas would be very helpful. And thanks for the quick response to my last question.

**ddadmin** · 09-02-2009, 10:34 AM

Setting the URL of a toggler link to "#" shouldn't be any issue, since the script disables the "href" attribute altogether in that case (so clicking on the link shouldn't do anything). If you look at Example 4, 5, and 6 on the script page, you can see that the href attribute is set to "#", yet no navigation occurs when you click on them.

Thread: Problem with Animated Collapse Script

Thread Tools

Search Thread

Problem with Animated Collapse Script

Opposite Problem

Bookmarks

Bookmarks

Posting Permissions